React MUI Floating Action Button
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/
