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' }} />, { icon: <LinkedInIcon style={{ fill: '#000000' }} />, { icon: <TwitterIcon style={{ fill: '#000000' }} />, { icon: <InstagramIcon style={{ fill: '#000000' }} />, ]; 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:
