Componente ReactJS Evergreen SelectMenu

React Evergreen es una biblioteca front-end popular con un conjunto de componentes React para crear productos hermosos, ya que esta biblioteca es flexible, tiene valores predeterminados sensibles y es fácil de usar. El componente SelectMenu permite al usuario seleccionar varios elementos de una lista desplegable. Podemos usar el siguiente enfoque en ReactJS para usar el componente Evergreen SelectMenu.

Accesorios de opción:

• children: Se utiliza para pasar el elemento children a este componente.
• disabled: Se utiliza para indicar si la opción está deshabilitada o no.
• altura: Se utiliza para denotar la altura.
• isHighlighted: Se utiliza para indicar si resaltar un elemento o no.
• isSelectable: Se utiliza para indicar si un elemento es seleccionable o no.
• isSelected: Se utiliza para indicar si un elemento está seleccionado o no.
• item: Se utiliza para indicar el elemento de nuestro SelectMenu.
• onSelect: Es una función que se activa cuando se selecciona una opción.
• onDeselect: Es una función que se activa cuando se deselecciona una opción.
• estilo: Se utiliza para dar estilo al componente.

Accesorios de la lista de opciones:

• opciones: Se utiliza para indicar las opciones a mostrar en el menú.
• close: Es una función que se dispara al cerrar el componente.
• ancho: se utiliza para indicar el ancho del menú de selección.
• altura: Se utiliza para indicar la altura del menú de selección.
• isMultiSelect: la selección múltiple se tiene en cuenta cuando se establece en verdadero.
• closeOnSelect: el menú se cierra en la selección de opciones cuando se establece en verdadero.
• seleccionado: se utiliza para indicar el valor o valores seleccionados.
• onSelect: Es una función que se activa cuando se selecciona una opción.
• onDeselect: Es una función que se activa cuando se deselecciona una opción.
• onFilterChange: Es una función que se activa para el evento onChange del filtro.
• hasFilter: se utiliza para mostrar el filtro cuando se establece en verdadero.
• optionSize: se utiliza para indicar el tamaño de la opción.
• renderItem: es una función que se puede utilizar para representar los elementos.
• filterPlaceholder: se utiliza para indicar el marcador de posición del filtro de búsqueda.
• filterIcon: Se utiliza para denotar el icono del filtro de búsqueda.
• optionsFilter: Es una función que se utiliza para filtrar las opciones.
• defaultSearchValue: se utiliza para indicar el valor de búsqueda predeterminado.

Accesorios del menú de selección:

• título: se utiliza para indicar el título del menú de selección.
• ancho: se utiliza para indicar el ancho del menú de selección.
• altura: Se utiliza para indicar la altura del menú de selección.
• opciones: Se utiliza para indicar las opciones a mostrar en el menú.
• onSelect: Es una función que se activa cuando se selecciona una opción.
• onDeselect: Es una función que se activa cuando se deselecciona una opción.
• seleccionado: se utiliza para indicar el valor o valores seleccionados.
• isMultiSelect: la selección múltiple se tiene en cuenta cuando se establece en verdadero.
• hasTitle: se utiliza para mostrar el título cuando se establece en verdadero.
• hasFilter: se utiliza para mostrar el filtro cuando se establece en verdadero.
• filterPlaceholder: se utiliza para indicar el marcador de posición del filtro de búsqueda.
• filterIcon: Se utiliza para denotar el icono del filtro de búsqueda.
• onFilterChange: Es una función que se activa para el evento onChange del filtro.
• posición: Se utiliza para la posición del menú de selección.
• detailView: es una función o un Node que se representa en el lado derecho del menú de selección para brindar información adicional cuando se selecciona una opción.
• titleView: es una función o un Node que se representa en la sección de encabezado del menú de selección para personalizar el encabezado.
• emptyView: es una función o un Node que se representa en lugar de la lista de opciones cuando no hay opciones.
• closeOnSelect: Se utiliza para indicar si cerrar o no el componente al seleccionar.
• itemRenderer: es una función que se puede usar para representar elementos personalizados en el menú de selección.
• itemHeight: se utiliza para indicar la altura de los elementos en la lista del menú de selección.

Accesorios SelectMenuContent:

• close: Es una función que se dispara al cerrar el componente.
• título: se utiliza para indicar el título del menú de selección.
• ancho: se utiliza para indicar el ancho del menú de selección.
• altura: Se utiliza para indicar la altura del menú de selección.
• headerHeight: se utiliza para indicar la altura del encabezado.
• opciones: Se utiliza para indicar las opciones a mostrar en el menú.
• hasTitle: se utiliza para mostrar el título cuando se establece en verdadero.
• hasFilter: se utiliza para mostrar el filtro cuando se establece en verdadero.
• filterPlaceholder: se utiliza para indicar el marcador de posición del filtro de búsqueda.
• filterIcon: Se utiliza para denotar el icono del filtro de búsqueda.
• listProps: se utiliza para indicar la lista de accesorios que se pasan a este componente.
• isMultiSelect: la selección múltiple se tiene en cuenta cuando se establece en verdadero.
• closeOnSelect: el menú se cierra en la selección de opciones cuando se establece en verdadero.
• titleView: se utiliza para indicar el Node que se coloca en la sección de encabezado.
• detailView: se utiliza para indicar el Node que se coloca justo al lado de las opciones.
• vista vacía: se utiliza para indicar el Node que se muestra en lugar de la lista de opciones cuando no hay opciones presentes.

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 evergreen-ui

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 { SelectMenu, Button } from 'evergreen-ui'
  
export default function App() {
  
  // State for selected 
  const [selected, setSelected] = React.useState(null)
  
  // Sample Options
  const options = [
    { label: 'Monday', value: 'Monday' },
    { label: 'Tuesday', value: 'Tuesday' },
    { label: 'Wednesday', value: 'Wednesday' },
    { label: 'Thursday', value: 'Thursday' },
    { label: 'Friday', value: 'Friday' },
    { label: 'Saturday', value: 'Saturday' },
    { label: 'Sunday', value: 'Sunday' },
  ]
  
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>ReactJS Evergreen SelectMenu Component</h4>
      <SelectMenu
        selected={selected}
        options={options}
        title="Select week day"
        onSelect={(item) => setSelected(item.value)}
      ><Button> {selected || `Select Weekday`}</Button>
      </SelectMenu>
    </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://evergreen.segment.com/components/select-menu