Componente desplegable 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 desplegable proporciona una navegación que usa un selector de selección si desea seleccionar un valor. Podemos usar el siguiente enfoque en ReactJS para usar el componente desplegable de React Suite.

Accesorios desplegables:

• activeKey: Se utiliza para configurar la opción de activar el estado que corresponde a la clave del evento en el componente Dropdown.item.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• disabled: Se utiliza para indicar si el componente está deshabilitado o no.
• icono: Se utiliza para configurar el icono.
• menuStyle: Se utiliza para denotar el estilo del menú.
• onClose: Es una función que se activa al cerrar el menú.
• onOpen: Es una función que se activa al abrir el menú.
• onSelect: es una función que se activa al seleccionar un elemento del menú.
• onToggle: Es una función que se activa en el cambio de estado del menú.
• abierto: se utiliza para indicar el estado abierto controlado.
• colocación: Se utiliza para la colocación del Menú.
• renderTitle: se utiliza para indicar el título personalizado
• título: el menú muestra por defecto el contenido.
• toggleClassName: se utiliza para indicar una clase CSS para aplicar al Node Toggle DOM
• toggleComponentClass: se puede usar como un elemento personalizado para este componente.
• trigger: Se utiliza para los eventos Triggering.

Desplegable.Accesorios de elementos:

• activo: Se utiliza para hacer que el estado sea activo para la opción actual.
• niños: Se utiliza para denotar el contenido principal.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• componentClass: se puede usar como un tipo de elemento personalizado para este componente.
• disabled: Se utiliza para deshabilitar la opción actual.
• divisor: Se utiliza para indicar si mostrar el divisor.
• eventKey: se utiliza para indicar el valor de la opción actual.
• icono: Se utiliza para configurar el icono.
• onSelect: es una función que se activa al seleccionar la opción actual.
• panel: Se utiliza para mostrar un panel personalizado.
• renderItem: se utiliza para el elemento de representación personalizado.

Accesorios del menú desplegable:

• icono: Se utiliza para configurar el icono.
• pullLeft: Se utiliza para hacer que el submenú se expanda desde la izquierda y por defecto a la derecha.
• title: Se utiliza para definir el título como un submenú.

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.

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Dropdown } from 'rsuite';
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React Suite Dropdown Component</h4>
      <Dropdown title="Select Weekday">
        <Dropdown.Item>Monday</Dropdown.Item>
        <Dropdown.Item>Tuesday</Dropdown.Item>
        <Dropdown.Item>Wednesday</Dropdown.Item>
        <Dropdown.Item>Thursday</Dropdown.Item>
        <Dropdown.Item>Friday</Dropdown.Item>
        <Dropdown.Item>Saturday</Dropdown.Item>
        <Dropdown.Item>Sunday</Dropdown.Item>
      </Dropdown>
    </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://rsuitejs.com/components/dropdown/