How to create a Speed Dial Component in ReactJS ?
Last Updated :
25 Jul, 2024
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>
);
}
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:
Similar Reads
How to create Functional Components in React ? To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b
2 min read
How to create Dialog Box in ReactJS? Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. Material UI for React has this component available for us and it is very easy to integrate. We can create the dialog box in ReactJS using the following approach:Creating React Applic
2 min read
How to use SpeedDial Component in ReactJS ? SpeedDial is a quick action button for the user from where the user can click over it and easily access the various option provided in the dial. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to use SpeedDial
2 min read
How to create Stepper Component Using React JS ? The checkout process on e-commerce websites often involves a series of steps, commonly represented by a stepper component. In this tutorial, we will guide you through creating a customizable stepper component using React, allowing you to easily integrate it into your web applications. Preview of fin
4 min read
How To Create A Custom Progress Bar Component In ReactJS? Progress bars are a key part of user interfaces that shows the progress of tasks such as uploads, downloads, or data loading. In ReactJS, creating a custom progress bar component gives you the flexibility to control its design and functionality to match your application's needs.In this article, we’l
3 min read
Creating a Timer Component with useEffect Hook in React Timer Component using React along with its useEffect hook will not only display the elapsed time since the component mounts but also allow users to set and manage the countdown timer dynamically. We will harness the power of the useEffect hook to manage side effects and update the timer seamlessly.
5 min read