React MUI Floating Action Button

0 0 3 minutes read

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!