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: