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
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>GeeksforGeeks</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
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>GeeksforGeeks</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
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>GeeksforGeeks</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/