Cambio personalizado desplegable de React Suite

React Suite es un marco de interfaz de usuario popular que consiste en un conjunto de componentes de React que podemos usar en nuestra aplicación de reacción. Es fácil de usar para los desarrolladores y es compatible con las versiones estables de todos los navegadores modernos como Chrome, Edge, Firefox, Safari, etc. En este artículo, hablaremos de React Suite Dropdown Custom Toggle .

Se utiliza un componente desplegable para mostrar una gran lista de opciones a los usuarios de la que los usuarios pueden seleccionar una o más opciones según el caso de uso. Alternar menú desplegable personalizado significa alternar el menú desplegable mediante una acción personalizada. El elemento de selección original no se representará en la interfaz en este caso, solo se mostrará la lista desplegable una vez que se abra el menú desplegable a través de una acción personalizada.

Componentes de alternancia personalizados desplegables de React Suite:

• Menú desplegable: este componente se utiliza para mostrar un elemento desplegable al usuario.

React Suite Dropdown Custom Toggle Atributos/Accesorios:

• renderToggle: este atributo se utiliza para configurar el conmutador personalizado en el menú desplegable de cualquier elemento.

Sintaxis:

<Dropdown renderToggle={...}>
    ...
</Dropdown>

Creación de la aplicación React e instalación de React Suite en el proyecto:

Paso 1: Cree la aplicación React usando el comando npx:

npx create-react-app foldername

Paso 2: después de crear la carpeta del proyecto, acceda a ella con el comando cd:

cd foldername

Paso 3 : después de crear la aplicación ReactJS, instale el módulo rsuite para que podamos usar el componente desplegable usando el siguiente comando:

npm install rsuite

Estructura del proyecto: después de seguir los pasos anteriores, la estructura del proyecto se verá así:

 

Veamos algunos ejemplos para entender cómo usar el atributo/prop de React Suite Dropdown renderToggle .

Ejemplo 1: ahora reemplace el código en el archivo App.js con el código a continuación. En este ejemplo, usamos el atributo/accesorio renderToggle del componente desplegable para establecer un botón como un conmutador personalizado.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { Button, Dropdown } from "rsuite";
  
function App() {
  
    // Button to trigger Dropdown
    const triggerButton = (props, ref) => {
        return (
            <Button {...props} ref={ref} appearance="primary">
                Toggle Dropdown
            </Button>
        );
    };
  
    return (
  
        <div className="App" style=
            {{ display: "flex", alignItems: "center", 
                flexDirection: "column" }}>
            <header style={{
                textAlign: "center", display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite Dropdown Custom Toggle</h5>
            </header>
  
            {/* This dropdown will be toggled through 
            the custom button */}
            <Dropdown renderToggle={triggerButton}>
                <Dropdown.Item>Data Structures</Dropdown.Item>
                <Dropdown.Item>Algorithms</Dropdown.Item>
                <Dropdown.Item>Computer Networks</Dropdown.Item>
                <Dropdown.Item>Computer Organisation</Dropdown.Item>
            </Dropdown>
        </div>
    );
}
  
export default App;

Ejecute la aplicación: ejecute su aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Vaya a http://localhost:3000/ en su navegador para ver la salida.

 

Ejemplo 2: en este ejemplo, configuramos una imagen como un conmutador personalizado para un menú desplegable para mostrar que cualquier componente se puede usar como un conmutador personalizado.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { Dropdown } from "rsuite";
  
function App() {
  
    // Image to use as a custom trigger for Dropdown
    const triggerImage = (props, ref) => {
        return (
            <img
                {...props}
                ref={ref}
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220626081330/download-200x200.png"
            />
        );
    };
  
    return (
  
        <div className="App" style={{
            display: "flex", alignItems: "center",
            flexDirection: "column"
        }}>
            <header style={{
                textAlign: "center", display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite Dropdown Custom Toggle</h5>
            </header>
  
            {/* This dropdown will be toggled through 
            the custom image component */}
            <Dropdown renderToggle={triggerImage}>
                <Dropdown.Item>Data Structures</Dropdown.Item>
                <Dropdown.Item>Algorithms</Dropdown.Item>
                <Dropdown.Item>Computer Networks</Dropdown.Item>
                <Dropdown.Item>Computer Organisation</Dropdown.Item>
            </Dropdown>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/dropdown/#custom-toggle