¿Cómo crear un componente de marcación rápida en ReactJS?

Material-UI Lab alberga componentes nuevos y emocionantes que no están completamente listos para la biblioteca principal. Un componente de marcación rápida es como un cuadro de diálogo con varios botones de acción flotantes. Se puede usar para hacer que cualquier acción principal, como compartir, copiar, imprimir, etc., sea más accesible y mejore la experiencia del usuario.

Creación de la aplicación React e instalación del módulo:

npx create-react-app gfg

cd gfg

npm install @material-ui/core
npm install @material-ui/icons
npm install @material-ui/lab

Cree un archivo socials.js en la carpeta src : crearemos un componente de ejemplo ‘Sociales’ que muestra todos los identificadores sociales del sitio web utilizando el componente Marcado rápido. Cree un nuevo archivo socials.js en la carpeta src donde definiremos nuestro componente.

Estructura del proyecto: Tendrá el siguiente aspecto.

Marcación rápida en Material-UI:

El componente Marcación rápida se puede utilizar para mostrar varias acciones principales juntas como botones de acción flotantes. Algunos de sus accesorios útiles:

• oculto: para establecer si SpeedDial estaría oculto o visible
• dirección: establece la dirección del botón de acción flotante, es decir, arriba, abajo, derecha e izquierda.
• icono: Icono de SpeedDial
• onOpen/onClose: funciones de controlador para cuando SpeedDial se expande y se cierra.

Ejemplo:

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: