Componente emergente de React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente Popover permite al usuario mostrar la información emergente que se desenstring en algún evento sobre la ventana principal. Podemos usar el siguiente enfoque en ReactJS para usar el componente Popover de React Suite.

Accesorios popover:

• children: Se utiliza para denotar el contenido del componente.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• title: Se utiliza para denotar el título del componente.
• visible: se utiliza para indicar que el componente es visible de forma predeterminada.

Accesorios de susurro:

• contenedor: Se utiliza para establecer el contenedor de renderizado.
• retardo: se utiliza para indicar el tiempo de retardo.
• delayHide: se utiliza para indicar el tiempo de retraso oculto.
• delayShow: se utiliza para indicar el tiempo de retraso del espectáculo.
• Enterable: se usa para indicar si el mouse puede ingresar a la capa flotante del popover cuando el valor de activación se establece en hover.
• lleno: Se utiliza para denotar el contenido lleno del contenedor.
• onBlur: es una función de devolución de llamada que se activa al perder el foco.
• onClick: es una función de devolución de llamada que se activa en el evento de clic.
• onClose: es una función de devolución de llamada que se activa al cerrar el componente.
• onEnter: es una función de devolución de llamada que se activa antes de que se produzca la transición de la superposición.
• onEntered: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
• onEntering: es una función de devolución de llamada que se activa cuando la superposición comienza a hacer la transición.
• onExit: es una función de devolución de llamada que se activa justo antes de que la superposición termine.
• onExited: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
• onExiting: es una función de devolución de llamada que se activa cuando la superposición comienza a salir.
• onFocus: es una función de devolución de llamada para obtener el foco.
• onMouseOut: es una función de devolución de llamada que se activa en el evento de abandono del mouse.
• onOpen: es una función de devolución de llamada que se activa cuando el componente abierto.
• colocación: Se utiliza para la colocación del componente.
• preventOverflow: se utiliza para evitar el desbordamiento de elementos flotantes.
• altavoz: Se utiliza para mostrar el componente.
• disparador: Se utiliza para los eventos desenstringntes.
• triggerRef: se utiliza para indicar la referencia del disparador.

Métodos de susurro:

• open: Es una función que se utiliza para mostrar el popover.
• close: Es una función que se utiliza para ocultar el popover.

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 el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

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.

Aplicación.js

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:

Ejemplo 2

En este ejemplo, hemos aprendido a usar un menú desplegable como Popover

import React from 'react'
import 'rsuite/dist/rsuite.min.css';
import { Popover, Whisper, Button } from 'rsuite';
import { Dropdown } from 'rsuite';
 
export default function App() {
 
  return (
    <div style={{
      display: 'block', width: 600, paddingLeft: 30
    }}>
    <h1 style={{color:'green'}}>GeeksforGeeks</h1>
      <h4>React Suite Popover Component</h4> <br></br>
      <Whisper
        trigger="click"
        placement='bottom'
        speaker={
          <Popover title="Geeks Menu">
          <Dropdown.Menu >
          <Dropdown.Item >New File</Dropdown.Item>
          <Dropdown.Item >New File with Current Profile</Dropdown.Item>
          <Dropdown.Item>Download As...</Dropdown.Item>
          <Dropdown.Item >Export PDF</Dropdown.Item>
          
        </Dropdown.Menu>
          </Popover>
        }
      >
        <Button appearance="subtle">
          Click me to Open Popover
        </Button>
      </Whisper>
    </div>
  );
}

PRODUCCIÓN

 

Referencia: https://rsuitejs.com/components/popover/