Home-theater-designers
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.
MUO Vídeo del día DESPLÁCETE PARA CONTINUAR CON EL CONTENIDO
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 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"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} />
</div>
)
}
export default 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"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} className='select'/>
</div>
)
}
export default 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.
¿Por qué mi explorador de archivos es tan lento?
He aquí un ejemplo:
import React from "react"
import Select from "react-select"
function App() {
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>
<Select options={options} styles={customStyles} />
</div>
)
}
export default 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"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
{ value: "grapes", label: "Grapes" },
{ value: "orange", label: "Orange" },
]
return (
<div>
<Select options={options} isMulti />
</div>
)
}
export default 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"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "apricot", label: "Apricot" },
{ value: "mango", label: "Mango" },
{ value: "mangosteens", label: "Mangosteens" },
{ value: "avocado", label: "Avocado" },
]
return (
<div>
<Select options={options} isSearchable />
</div>
)
}
export default 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"
function App() {
const CustomOption = (obj) => (
<div {...obj.innerProps}>
<span>{obj.label}</span>
<span style={{ marginInlineStart: "0.2rem" }}>Fruit</span>
</div>
)
const CustomDropdownIndicator = (props) => (
<components.DropdownIndicator {...props}>
<span>↓</span>
</components.DropdownIndicator>
)
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customComponents = {
Option: CustomOption,
DropdownIndicator: CustomDropdownIndicator,
}
return <Select options={options} components={customComponents} />
}
export default 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.