Componente Popover de ReactJS Reactstrap

Reactstrap es una biblioteca front-end popular que es fácil de usar con componentes React Bootstrap 4. Esta biblioteca contiene los componentes de React sin estado para Bootstrap 4. Podemos usar el siguiente enfoque en ReactJS para usar el componente Popover de ReactJS Reactstrap.

Accesorios popover:

• children: Se utiliza para pasar el elemento children a este componente.
• disparador: Se utiliza para denotar una lista de disparadores separados por espacios.
• isOpen: Se utiliza para indicar si abrir popover o no.
• alternar: es una función de devolución de llamada para alternar isOpen en el componente de control.
• bordersElement: se utiliza para indicar los límites de un popper.
• contenedor: Se utiliza para indicar dónde inyectar el Node DOM popper.
• className: se utiliza para indicar el nombre de la clase para el estilo.
• popperClassName: Se utiliza para aplicar una clase al componente popper.
• innerClassName: se utiliza para aplicar una clase al popover interno.
• disabled: Se utiliza para indicar si el componente está deshabilitado o no.
• hideArrow: Se utiliza para indicar si ocultar una flecha o no.  
• placementPrefix: se utiliza para indicar la clase de prefijo de ubicación como bs-popover, etc.
• retardo: se utiliza para indicar el valor de retardo.
• colocación: Se utiliza para la colocación del popover.
• modificadores : se utiliza para indicar un modificador personalizado que se pasa a Popper.js
• positionFixed: se utiliza para indicar si el elemento señalador popover tiene posición: estilo fijo o no.
• offset: Se utiliza para denotar elemento de desplazamiento.
• fade: Se utiliza para indicar si mostrar/ocultar el popover con un efecto de fundido.
• flip: se utiliza para indicar si se debe invertir la dirección del popover si está demasiado cerca del borde del contenedor.

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 reactstrap bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí hemos mostrado Popover con un componente de encabezado y la ubicación de popover está en la posición inferior.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap"
  
function App() {
  
    // Popover open state
    const [popoverOpen, setPopoverOpen] = React.useState(false);
  
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Popover Component</h4>
            <Button id="Popover1" type="button">
                Click me to Open Popover
            </Button> <br></br>
            <Popover
                placement="bottom" isOpen={popoverOpen}
                target="Popover1" toggle=
                    {() => { setPopoverOpen(!popoverOpen) }}>
                <PopoverHeader>Sample Popover Title</PopoverHeader>
                <PopoverBody>Sample Body Text to display...</PopoverBody>
            </Popover>
        </div >
    );
}
  
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:

Ejemplo 2: ahora escriba el siguiente código en el archivo App.js. Aquí hemos mostrado Popover sin un componente de encabezado y la ubicación de popover está en la posición correcta.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Popover, PopoverBody } from "reactstrap"
  
function App() {
  
    // Popover open state
    const [popoverOpen, setPopoverOpen] = React.useState(false);
  
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Popover Component</h4>
            <Button id="Popover" color="primary">
                Click to Open Popover
            </Button> <br></br>
            <Popover
                placement="right" isOpen={popoverOpen}
                target="Popover" toggle=
                    {() => { setPopoverOpen(!popoverOpen) }}>
                <PopoverBody>Sample Body Text to display...</PopoverBody>
            </Popover>
        </div >
    );
}
  
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:

Referencia: https://reactstrap.github.io/components/popovers/