Open In App

React MUI Floating Action Button

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

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



Last Updated : 07 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads