Skip to content
Related Articles

Related Articles

How to create a Speed Dial Component in ReactJS ?
  • Last Updated : 07 Apr, 2021

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:

    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :