Thursday, September 4, 2025
HomeLanguagesHow to create a Speed Dial Component in ReactJS ?

How to create a Speed Dial Component in ReactJS ?

The Material-UI Lab hosts new and exciting components that aren’t fully ready for the core library. A Speed Dial component is like a dialog with multiple floating action buttons. It can be used to make any primary actions like share, copy, print, etc. more accessible and make the user experience better.

Creating React Application And Installing Module:

  • Step 1: Create a React application using the following command:

    npx create-react-app gfg
  • Step 2: After creating your project folder i.e. gfg, move to it using the following command:

    cd gfg
  • Step 3: After creating the ReactJS application, Install the material-ui modules using the following command:

    npm install @material-ui/core
    npm install @material-ui/icons
    npm install @material-ui/lab
  • Create a file socials.js in the src folder: We’ll create an example component ‘Socials’ that displays all the social handles of the website using the Speed Dial component. Create a new file socials.js in the src folder where we’ll define our component.

    Project Structure: It will look like the following.

    Speed Dial in Material-UI:

    The Speed Dial component can be used to display multiple primary actions as floating action buttons together. Some of its useful props:

    • hidden: To set whether the SpeedDial would be hidden or visible
    • direction: Sets the direction of the floating action button i.e., up, down, right, and left.
    • icon: Icon of the SpeedDial
    • onOpen/onClose: Handler functions for when SpeedDial is expanded and closed.

    Example:

    socials.js




    import React from 'react';
    import SpeedDial from '@material-ui/lab/SpeedDial';
    import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
    import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
    import InstagramIcon from '@material-ui/icons/Instagram';
    import GitHubIcon from '@material-ui/icons/GitHub';
    import LinkedInIcon from '@material-ui/icons/LinkedIn';
    import TwitterIcon from '@material-ui/icons/Twitter';
    import EditIcon from '@material-ui/icons/Edit';
      
    const style = {
        margin: 0,
        right: 20,
        bottom: 20,
        position: 'fixed',
    };
      
    const actions = [
        { icon: <GitHubIcon style={{ fill: '#000000' }} />, 
        name: 'GitHub', link: "https://www.google.com/" },
        { icon: <LinkedInIcon style={{ fill: '#000000' }} />, 
        name: 'LinkedIn', link: "https://www.google.com/" },
        { icon: <TwitterIcon style={{ fill: '#000000' }} />, 
        name: 'Twitter', link: "https://www.google.com/" },
        { icon: <InstagramIcon style={{ fill: '#000000' }} />, 
        name: 'Instagram', link: "https://www.google.com/" },
    ];
      
    export default function Socials() {
        const [open, setOpen] = React.useState(false);
        const handleOpen = () => {
            setOpen(true);
        };
      
        const handleClose = () => {
            setOpen(false);
        };
        return (
            <div>
                <SpeedDial
                    ariaLabel="SpeedDial openIcon example"
                    style={style}
                    hidden={false}
                    icon={<SpeedDialIcon openIcon={<EditIcon />} />}
                    onClose={handleClose}
                    onOpen={handleOpen}
                    open={open}
                >
                    {actions.map((action) => (
                        <SpeedDialAction
                            key={action.name}
                            icon={action.icon}
                            tooltipTitle={action.name}
                            onClick={handleClose}
                            href={action.link}
                        />
                    ))}
                </SpeedDial>
            </div>
        );
    }

    
    

    App.js




    import React, { Component } from 'react';
    import CssBaseline from '@material-ui/core/CssBaseline';
    import Container from '@material-ui/core/Container';
    import Typography from '@material-ui/core/Typography';
    import Socials from './socials';
      
    class App extends Component {
        render() {
            return (
                <React.Fragment>
                    <CssBaseline />
                    <br></br>
                    <Container maxWidth="sm">
                        <Typography component="h1" variant="h1" 
                        align="center" gutterBottom>
                            Geeks for Geeks
                        </Typography>
                        <br />
                        <Typography component="h3" variant="h3" 
                        align="center" gutterBottom>
                            Speed Dial Demo
                        </Typography>
                    </Container>
                    <br /><br />
                    <Socials></Socials>
                </React.Fragment>
            );
        }
    }
      
    export default App;

    
    

    Step to Run Application: Run the application using the following command from the root directory of the project:

    npm start

    Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

    Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen 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!
    RELATED ARTICLES

    Most Popular

    Dominic
    32262 POSTS0 COMMENTS
    Milvus
    81 POSTS0 COMMENTS
    Nango Kala
    6626 POSTS0 COMMENTS
    Nicole Veronica
    11799 POSTS0 COMMENTS
    Nokonwaba Nkukhwana
    11857 POSTS0 COMMENTS
    Shaida Kate Naidoo
    6749 POSTS0 COMMENTS
    Ted Musemwa
    7025 POSTS0 COMMENTS
    Thapelo Manthata
    6696 POSTS0 COMMENTS
    Umr Jansen
    6716 POSTS0 COMMENTS