¿Cómo usar el componente Popover en ReactJS?

Un Popover es un control gráfico que es un elemento de tipo contenedor que se desplaza sobre la ventana principal y se asegura de que todas las demás interacciones estén bloqueadas hasta que se seleccione. Material UI for React tiene este componente disponible para nosotros y es muy fácil de integrar. Podemos usar el componente Popper en ReactJS usando el siguiente enfoque.

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

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando.

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale los módulos material-ui usando el siguiente comando.

npm install @material-ui/core

Estructura del proyecto:

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. 

import React from "react";
import Button from "@material-ui/core/Button";
import Popover from "@material-ui/core/Popover";
  
export default function App() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  
  return (
    <div style={{ display: "block", padding: 30 }}>
      <h4>How to use Popover Component in ReactJS?</h4>
      <Button
        variant="contained"
        color="primary"
        onClick={(event) => {
          setAnchorEl(event.currentTarget);
        }}
      >
        Click me to open Popover
      </Button>
      <Popover
        anchorEl={anchorEl}
        open={open}
        id={open ? "simple-popover" : undefined}
        onClose={() => {
          setAnchorEl(null);
        }}
        transformOrigin={{
          horizontal: "center",
          vertical: "top",
        }}
        anchorOrigin={{
          horizontal: "center",
          vertical: "bottom",
        }}
      >
        How are you?
      </Popover>
    </div>
  );
}

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.

Referencia: https://material-ui.com/components/popover/