Dale vida a tus aburridos menús desplegables con esta biblioteca flexible de React.

Una entrada de selección es un componente útil de la aplicación web que le permite elegir un valor entre muchas opciones sin ocupar mucho espacio. Pero el estilo predeterminado puede ser aburrido y chocar con el resto de su diseño.

React Select proporciona una solución flexible y personalizable para mejorar la apariencia y funcionalidad de las entradas desplegables.

Instalación de reaccionar seleccionar

Integrando React con otras bibliotecas o tecnologías, como React Select, React Redux y muchos más, pueden simplificar el proceso de desarrollo.

Para comenzar con React Select, debe instalarlo en su proyecto. A haz esto usando npm, ejecute este comando de terminal en el directorio de su proyecto:

npm i --save react-select

Esto instalará y configurará la biblioteca en su proyecto React, para que pueda comenzar a usarla.

Creando entradas seleccionadas con React Select

Ahora que ha configurado la biblioteca, puede usarla para crear entradas seleccionadas. Para hacer esto, utilizará el

instagram viewer
Seleccionar componente. Este es un componente altamente personalizable que permite a los usuarios seleccionar opciones de una lista.

A continuación se muestra un ejemplo de cómo utilizar el componente Seleccionar:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


return (





 </div>
 )
}
exportdefault App

Este ejemplo comienza importando el Seleccionar componente de “reaccionar-seleccionar”. Define un opciones matriz con tres objetos, cada uno con un valor y un etiqueta propiedad. La propiedad value representa el valor que el formulario enviará al backend cuando lo envíe. La propiedad de etiqueta es el texto que el componente Seleccionar mostrará en el menú desplegable.

Cuando renderice el componente Seleccionar, pásele la matriz de opciones usando el opciones apuntalar.

Con este bloque de código, la biblioteca React Select generará un menú desplegable como este:

Personalización de las entradas seleccionadas

React Select proporciona varias formas de personalizar las entradas seleccionadas. Puede utilizar clases CSS o aplicar estilos en línea directamente a las entradas seleccionadas, según sus preferencias.

Personalización con clases CSS

La biblioteca React Select proporciona una nombre de la clase apoyo para el Seleccionar componente. Utilice este accesorio className para aplicar una hoja de estilo en cascada (CSS) personalizada estilos a sus componentes Select.

Por ejemplo:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


return (






exportdefault App

El bloque de código anterior es similar al anterior, pero utiliza el nombre de la clase prop para aplicar una clase CSS personalizada al Seleccionar componente. Proporcione un nombre en el atributo className y podrá usarlo para aplicar estilos CSS al componente:

.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}

Después de definir los estilos, su entrada seleccionada se verá así:

Personalización con estilos en línea

También puede definir estilos en línea en un objeto que pasa a través del estilos apoyo de la Seleccionar componente. Esto le brinda más control sobre el estilo de los elementos individuales.

He aquí un ejemplo:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


const customStyles = {
 control: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#e2e2e2",
 }),
 option: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: state.isFocused? "#e2e2e2": "",
 color: state.isFocused? "#333333": "#FFFFFF",
 }),
 menu: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#333333",
 }),
 }


return (





 </div>
 )
}
exportdefault App

El objeto de utilería, estilos personalizados, contiene propiedades de estilo para el componente Seleccionar control, opción, y menú partes. Estas propiedades son funciones que toman dos argumentos: estilos base y estado.

El parámetro baseStyles representa los estilos predeterminados proporcionados por React Select, mientras que el parámetro state representa el estado actual del elemento. En este ejemplo, las funciones utilizan el operador de extensión para combinar los estilos base con estilos adicionales para cada parte del componente.

Después de aplicar estos estilos, su entrada seleccionada debería verse así:

Agregar funcionalidad a las entradas seleccionadas

React Select proporciona varias funciones para mejorar la funcionalidad de entradas seleccionadas. Puede habilitar la funcionalidad de búsqueda y selección múltiple, e incluso crear componentes desplegables personalizados.

Funcionalidad de selección múltiple

Para habilitar la funcionalidad de selección múltiple en sus menús desplegables, pase el esMulti prop al componente Seleccionar. Esto permite a los usuarios seleccionar múltiples opciones en el menú desplegable.

Por ejemplo:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 { value: "grapes", label: "Grapes" },
 { value: "orange", label: "Orange" },
 ]


return (





 </div>
 )
}
exportdefault App

Este ejemplo demuestra cómo utilizar el esMulti prop para agregar la funcionalidad de selección múltiple a sus entradas seleccionadas.

Funcionalidad de búsqueda

La biblioteca React Select proporciona una función de búsqueda integrada para filtrar opciones fácilmente. De forma predeterminada, el componente Seleccionar muestra la entrada de búsqueda cuando abre el menú desplegable. Los usuarios pueden escribir la entrada de búsqueda para filtrar las opciones disponibles.

Para habilitar la función de búsqueda, pase el se puede buscar apoyar a la Seleccionar componente. Como el esMulti prop, isSearchable acepta un valor booleano.

A continuación se muestra un ejemplo de cómo utilizar la propiedad isSearchable para habilitar la funcionalidad de búsqueda:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "apricot", label: "Apricot" },
 { value: "mango", label: "Mango" },
 { value: "mangosteens", label: "Mangosteens" },
 { value: "avocado", label: "Avocado" },
 ]


return (





 </div>
 )
}
exportdefault App

Al renderizar el bloque de código anterior se mostrará una entrada de selección con función de búsqueda. Se verá y funcionará así:

Crear componentes desplegables personalizados

React Select le permite crear componentes desplegables personalizados utilizando la propiedad de componentes. Puede anular los componentes predeterminados proporcionados por React Select y personalizar la apariencia y el comportamiento del menú desplegable según sus gustos.

Por ejemplo:

import React from"react"
import Select, { components } from"react-select"
functionApp() {
const CustomOption = (obj) => (




{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
 </div>
 )



const CustomDropdownIndicator = (props) => (

↓</span>
 </components.DropdownIndicator>
 )


const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


const customComponents = {
 Option: CustomOption,
 DropdownIndicator: CustomDropdownIndicator,
 }


return<Selectoptions={options}components={customComponents} />
}
exportdefault App

Este bloque de código muestra cómo crear componentes personalizados para una entrada seleccionada usando el componentes apoyo de la Seleccionar componente. Importa el componentes objeto que es una colección de componentes predefinidos que puede utilizar para personalizar la apariencia y el comportamiento de varios elementos en sus entradas seleccionadas.

El código define dos componentes funcionales: Opción personalizada y Indicador desplegable personalizado. El componente CustomOption toma un objeto como parámetro. Este objeto contiene varias propiedades que proporciona React Select, como accesorios internos y etiqueta.

El componente CustomDropdownIndicator toma accesorios como parámetro. Este componente muestra un indicador desplegable personalizado con un símbolo de flecha hacia abajo. El código crea un componentes personalizados objeto que asigna los componentes CustomOption y CustomDropdownIndicator al correspondiente Opción y Indicador desplegable llaves.

Finalmente, este código pasa el objeto customComponents al accesorio de componentes del componente Seleccionar. Esto generará una entrada seleccionada con los componentes personalizados, con este aspecto:

Los componentes estándar pueden ser más potentes y atractivos

React Select es una biblioteca poderosa que te permite crear entradas seleccionadas hermosas y elegantes en React. Puede personalizar las entradas seleccionadas, agregarles funcionalidad y crear componentes desplegables personalizados. Aprovechando esta biblioteca, puede mejorar la apariencia y la experiencia de usuario de sus aplicaciones React.