Componente React-Bootstrap Fade and Collapse

React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Fade Component proporciona una forma de agregar una animación de fundido a un componente o elemento secundario. Collapse Component proporciona una forma de agregar una animación de alternancia de colapso a un componente o elemento. Podemos usar el siguiente enfoque en ReactJS para usar el componente Fade and Collapse de react-bootstrap.

Accesorios de desvanecimiento:

• aparecer: cuando el componente se monta, se utiliza para ejecutar la animación de aparición gradual.
• in: Se utiliza para mostrar el componente.
• mountOnEnter: se utiliza para montar el componente mientras espera hasta que se activa la primera transición de entrada .
• onEnter: es una función de devolución de llamada que se activa antes de que el componente se desvanezca.
• onEntered: es una función de devolución de llamada que se activa después de que el componente haya desaparecido.
• onEntering: es una función de devolución de llamada que se activa después de que el componente comienza a aparecer gradualmente.
• onExit: es una función de devolución de llamada que se activa antes de que el componente desaparezca.
• onExited: es una función de devolución de llamada que se activa después de que el componente se haya desvanecido.
• onExiting: es una función de devolución de llamada que se activa después de que el componente comienza a desvanecerse.
• timeout: se utiliza para indicar la duración de la animación de desvanecimiento en milisegundos.
• unmountOnExit: Se utiliza para desmontar el componente.

Contraer accesorios:

• aparecer: cuando el componente se monta, se utiliza para ejecutar la animación de expansión.
• children: Se utiliza para definir el elemento child de este componente.
• className: se utiliza para agregar un nombre de clase para el estilo de este componente.
• Dimensión: Denota la dimensión en forma de alto y ancho.
• getDimensionValue: es una función que devuelve el ancho o alto del Node DOM animado.
• in: Se utiliza para mostrar el componente.
• mountOnEnter: se utiliza para montar el componente mientras espera hasta que se activa la primera transición de entrada .
• onEnter: es una función de devolución de llamada que se activa antes de que se expanda el componente.
• onEntered: es una función de devolución de llamada que se activa después de que el componente se haya expandido.
• onEntering: es una función de devolución de llamada que se activa después de que el componente comienza a expandirse.
• onExit: es una función de devolución de llamada que se activa antes de que el componente colapse.
• onExited: es una función de devolución de llamada que se activa después de que el componente se haya colapsado.
• onExiting: es una función de devolución de llamada que se activa después de que el componente comienza a colapsar.
• rol: Se utiliza para definir el rol ARIA del elemento contraíble.
• timeout: se utiliza para indicar la duración de la animación de colapso en milisegundos.
• unmountOnExit: Se utiliza para desmontar el componente.

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: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install react-bootstrap 
npm install bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo de componente Fade: 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.

Nombre de archivo: App.js

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Button from 'react-bootstrap/Button'
import Fade from 'react-bootstrap/Fade'
 
export default function App() {
 
  const [open, setOpen] = useState(false);
 
  return (
    <div style={{ display: 'block',
                  width: 700, padding: 30 }}>
      <h4>React-Bootstrap Fade Component</h4>
      <div style={{ width: 660, height: 'auto' }}>
        <Button
          variant="link"
          onClick={() => setOpen(!open)}
          aria-expanded={open}
          aria-controls="fadeID"
        >
          Click to see Fade Effect!
      </Button>
        <Fade in={open}>
          <div id="fadeID"
            style={{
              width: 300,
              textAlign: 'justify'
            }}
          >
            Greetings from GeeksforGeeks, How are you?
            Stay safe
            Always keep yourself health.
            Study and work hard.
          </div>
        </Fade>
      </div>
    </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:

Ejemplo de colapsar componente: 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.

Nombre de archivo: App.js

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Button from 'react-bootstrap/Button'
import Collapse from 'react-bootstrap/Collapse'
 
export default function App() {
 
  const [open, setOpen] = useState(false);
 
  return (
    <div style={{ display: 'block',
                  width: 700, padding: 30 }}>
      <h4>React-Bootstrap Collapse Component</h4>
      <div style={{ width: 660, height: 'auto' }}>
        <Button
          variant="link"
          onClick={() => setOpen(!open)}
          aria-expanded={open}
          aria-controls="collapseID"
        >
          Click to see Collapse Effect!
      </Button>
        <Collapse in={open}>
          <div id="collapseID"
            style={{
              width: 300,
              textAlign: 'justify'
            }}
          >
            Greetings from GeeksforGeeks, How are you?
            Stay safe
            Always keep yourself health.
            Study and work hard.
          </div>
        </Collapse>
      </div>
    </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://react-bootstrap.github.io/utilities/transitions/#collapse
• https://react-bootstrap.github.io/utilities/transitions/#fade