React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI Floating action button. A Floating Action Button (FAB) is used to do the primary or some of the most common actions on a screen with the help of a floating button. It can be found in the front of all display content in the form of a circle or any other shape with an icon in the center.
Types of Floating Action Button: The floating action button or FAB comes in two types:
- Regular: It is circular in shape, small in size as compared to an extended FAB, and contains an icon in the center.
- Extended: It is wider in size and includes a text label.
Creating React Project:
Step 1: To create a react app, install react modules through the npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Step to Run Application:
npm start
Example 1: Below example demonstrates the React MUI Floating action button.
App.js
Javascript
import React from "react"; import Fab from "@mui/material/Fab"; import Github from "@mui/icons-material/GitHub"; import Linkedin from "@mui/icons-material/LinkedIn"; function App() { return ( <div> <div style={{ textAlign: "center", color: "green" }}> <h1>neveropen</h1> <h2>React MUI Floating action button</h2> </div> <div style={{ textAlign: "center" }}> <Fab color="success"> <Github /> </Fab> <Fab color="primary"> <Linkedin /> </Fab> </div> </div> ); } export default App; |
Output:
Example 2: Below example demonstrates the React MUI Floating action buttons of different sizes and colors.
App.js
Javascript
import React from "react"; import Fab from "@mui/material/Fab"; import { Facebook } from "@mui/icons-material"; function App() { return ( <div> <div style={{ textAlign: "center", color: "green" }}> <h1>neveropen</h1> <h2>React MUI Floating action button</h2> </div> <div style={{ textAlign: "center" }}> <Fab color="primary" style={{ marginRight: 5 }}> <Facebook /> </Fab> <Fab color="primary" size="medium" style={{ marginRight: 5 }}> <Facebook /> </Fab> <Fab color="primary" size="small"> <Facebook /> </Fab> </div> </div> ); } export default App; |
Output:
Example 3: Below example demonstrates the React MUI Animated Floating action.
App.js
Javascript
import React from "react"; import SwipeableViews from "react-swipeable-views"; import { useTheme } from "@mui/material/styles"; import AppBar from "@mui/material/AppBar"; import Tabs from "@mui/material/Tabs"; import Tab from "@mui/material/Tab"; import Typography from "@mui/material/Typography"; import Zoom from "@mui/material/Zoom"; import Fab from "@mui/material/Fab"; import AddIcon from "@mui/icons-material/Add"; import DeleteIcon from "@mui/icons-material/Delete"; import Box from "@mui/material/Box"; function GeekTabPanel(props) { const { children: child, value, index } = props; return ( <Typography role="tabpanel" hidden={value !== index}> {value === index && <Box sx={{ p: 3 }}>{child}</Box>} </Typography> ); } function alProps(index) { return { id: `action-tab-${index}`, "aria-controls": `action-tabpanel-${index}`, }; } const Style = { position: "absolute", bottom: 16, right: 16, }; function App() { const theme = useTheme(); const [val, setVal] = React.useState(0); const handleChange = (event, newValue) => { setVal(newValue); }; const handleChangeIndex = (index) => { setVal(index); }; const fabcomponent = [ { color: "success", sx: Style, icon: <AddIcon />, label: "Add", }, { color: "error", sx: Style, icon: <DeleteIcon />, label: "Delete", }, ]; return ( <div> <div style={{ textAlign: "center", color: "green" }}> <h1>neveropen</h1> <h2>React MUI Floating Action Button</h2> </div> <center> <Box sx={{ bgcolor: "#CCFFCF", width: 500, position: "relative", minHeight: 200, }} > <AppBar position="static" color="default"> <Tabs value={val} onChange={handleChange} indicatorColor="primary" textColor="primary" > <Tab label="Add" {...alProps(0)} /> <Tab label="Delete" {...alProps(1)} /> </Tabs> </AppBar> <SwipeableViews axis={theme.direction === "rtl" ? "x-reverse" : "x"} index={val} onChangeIndex={handleChangeIndex} > <GeekTabPanel value={val} index={0} dir={theme.direction}> Add an Item </GeekTabPanel> <GeekTabPanel value={val} index={1} dir={theme.direction}> Delete an Item </GeekTabPanel> </SwipeableViews> {fabcomponent.map((fab, index) => ( <Zoom key={fab.color} in={val === index} > <Fab sx={fab.sx} color={fab.color}> {fab.icon} </Fab> </Zoom> ))} </Box> </center> </div> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/react-floating-action-button/
