Componente Popovers de ReactJS MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente Popovers en ReactJS MDBootstrap.
El componente Popovers se usa para crear un botón que aparecerá al hacer clic en él.

Sintaxis:

<MDBPopover btnChildren='Click' >
    <MDBPopoverBody>GeeksforGeeks</MDBPopoverBody>
</MDBPopover>

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, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Paso 4: Importe el elemento que se utilizará en el proyecto.

import { MDBPopover } from 'mdb-react-ui-kit'

Estructura del proyecto : Se verá como lo siguiente.

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

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Popover.

import React from "react";
import { MDBPopover, MDBPopoverBody, 
    MDBPopoverHeader } from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <div id="gfg">
  
            <MDBPopover size='sm' color='success' 
                btnChildren='Click Here to toggle'>
                <MDBPopoverHeader>MDBootstrap</MDBPopoverHeader>
                <MDBPopoverBody>Reactstrap is a bootstrap based 
                    react UI library that is used to make
                    good looking webpages with its seamless 
                    and easy to use component.</MDBPopoverBody>
            </MDBPopover>
        </div>
    );
}

Producción:

Ejemplo 2: en este ejemplo, sabremos cómo usar la propiedad de ubicación en un componente emergente.

import React from "react";
import { MDBPopover, MDBPopoverBody, 
    MDBPopoverHeader } from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <div id="gfg">
  
            <MDBPopover size='sm' color='success' placement='right' 
                btnChildren='Click Here to toggle'>
                <MDBPopoverHeader>Placement Property</MDBPopoverHeader>
                <MDBPopoverBody>Reactstrap is a bootstrap based 
                    react UI library that is used to make
                    good looking webpages with its seamless 
                    and easy to use component.</MDBPopoverBody>
            </MDBPopover>
        </div>
    );
}

Producción:

Ejemplo 3: En este ejemplo, sabremos cómo usar la propiedad disabled en un componente popover.

import React from "react";
import { MDBPopover, MDBPopoverBody, MDBPopoverHeader } from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <div id="gfg">
  
            <MDBPopover size='sm' color='success' 
                disabled btnChildren='Click Here to toggle'>
                <MDBPopoverHeader>Placement Property</MDBPopoverHeader>
                <MDBPopoverBody>Reactstrap is a bootstrap based 
                    react UI library that is used to make
                    good looking webpages with its seamless 
                    and easy to use component.</MDBPopoverBody>
            </MDBPopover>
        </div>
    );
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/components/popovers/