react select search
1.0.0
En primer lugar, quiero agradecerles a todos por el increíble apoyo a lo largo de los años. Este fue uno de mis primeros proyectos de código abierto y también el primero exitoso. ¡Estoy más que agradecido por los 33! colaboradores, no habría sido posible ejecutar este proyecto sin ustedes.
Pasaron muchas cosas el año pasado. Tuve mi primer hijo, tuve algunos trabajos independientes que me consumieron mucho tiempo y algunas nuevas empresas que crecieron. Esto le quitó tiempo al código abierto y siento que ya no puedo hacerle justicia a este componente. Al menos no solo.
Sigo creyendo en un componente de selección pequeño, súper rápido y sin dependencia. Si hay alguien que quiera mantener esto conmigo, comuníquese con nosotros para discutir los próximos pasos. Envíame un correo electrónico a [email protected] o contáctame en Twitter
Instálelo con npm ( npm i react-select-search ) o hilo ( yarn add react-select-search ) e importarlo como lo haría normalmente.
import SelectSearch from 'react-select-search' ;
/**
* The options array should contain objects.
* Required keys are "name" and "value" but you can have and use any number of key/value pairs.
*/
const options = [
{ name : 'Swedish' , value : 'sv' } ,
{ name : 'English' , value : 'en' } ,
{
type : 'group' ,
name : 'Group name' ,
items : [
{ name : 'Spanish' , value : 'es' } ,
]
} ,
] ;
/* Simple example */
< SelectSearch options = { options } value = "sv" name = "language" placeholder = "Choose your language" / >Para más ejemplos, puedes echar un vistazo en el directorio de historias.
También necesitarás algo de CSS para que se vea bien. Se puede encontrar un tema de ejemplo en style.css. También puedes importarlo:
import 'react-select-search/style.css' Para usar con SSR, es posible que necesite usar el paquete commonjs (react-select-search/dist/cjs). Si desea utilizar el tema de ejemplo (style.css), debe verificar si su script de compilación manipula los nombres de las clases, por ejemplo, los minimiza. Si ese es el caso, puede usar módulos CSS para obtener los nombres de las clases del archivo style.css y aplicarlos usando el objeto className. Se puede ver un ejemplo aquí y aquí https://react-select-search.com/?path=/story/custom--css-modules.
Si desea un control total (más que estilos y renderizadores personalizados), puede usar enlaces para pasar datos a sus propios componentes y compilarlos usted mismo.
import React from 'react' ;
import { useSelect } from 'react-select-search' ;
const CustomSelect = ( { options , value , multiple , disabled } ) => {
const [ snapshot , valueProps , optionProps ] = useSelect ( {
options ,
value ,
multiple ,
disabled ,
} ) ;
return (
< div >
< button { ... valueProps } > { snapshot . displayValue } < / button >
{ snapshot . focus && (
< ul >
{ snapshot . options . map ( ( option ) => (
< li key = { option . value } >
< button { ... optionProps } value = { option . value } > { option . name } < / button >
< / li >
) ) }
< / ul >
) }
< / div >
) ;
} ; A continuación se muestran todas las opciones disponibles que puede pasar al componente. Se requieren opciones sin valores predeterminados.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| opciones | formación | Consulte la documentación de opciones a continuación | |
| obtener Opciones | función | nulo | Obtener opciones a través de una llamada de función puede devolver una promesa de uso asíncrono. Consulte obtener opciones para obtener más información. |
| opciones de filtro | formación | nulo | Una serie de funciones que toma las últimas opciones filtradas y una consulta de búsqueda, si corresponde. Se ejecuta después de getOptions. |
| valor | cadena, matriz | nulo | El valor debe ser una matriz si está en modo múltiple. |
| múltiple | booleano | FALSO | Configúrelo en verdadero si desea permitir múltiples opciones seleccionadas. |
| buscar | booleano | FALSO | Establecer en verdadero para habilitar la función de búsqueda |
| desactivado | booleano | FALSO | Desactiva todas las funciones |
| cerrarAlSeleccionar | booleano | verdadero | El cuadro de selección se difuminará de forma predeterminada al seleccionar una opción. Establezca esto en falso para evitar este comportamiento. |
| rebote | número | 0 | Número de ms que se esperarán hasta llamar a las opciones de obtención al realizar la búsqueda. |
| marcador de posición | cadena | cadena vacía | Se muestra si no se selecciona ninguna opción y/o cuando el campo de búsqueda está enfocado con un valor vacío. |
| identificación | cadena | nulo | ID HTML en el elemento de nivel superior. |
| autocompletar | cadena, encendido/apagado | apagado | Deshabilita/Habilita la funcionalidad de autocompletar en el campo de búsqueda. |
| enfoque automático | booleano | FALSO | Enfoque automático al seleccionar |
| nombre de clase | cuerda, objeto | seleccionar cuadro de búsqueda | Establezca una cadena de clase base o pase una función para obtener un control total. Consulte nombres de clases personalizados para obtener más información. |
| opción de renderizado | función | nulo | Función que representa las opciones. Consulte los renderizadores personalizados para obtener más información. |
| renderGroupHeader | función | nulo | Función que representa el encabezado del grupo. Consulte los renderizadores personalizados para obtener más información. |
| valor de renderizado | función | nulo | Función que representa el valor/campo de búsqueda. Consulte los renderizadores personalizados para obtener más información. |
| mensaje vacío | Reaccionar nodo | nulo | Establezca un mensaje vacío para la lista de opciones vacía, puede proporcionar una función de representación sin argumentos en lugar de un mensaje de cadena simple |
| en cambio | función | nulo | Función para recibir y manejar cambios de valor. |
| en foco | función | nulo | Devolución de llamada de enfoque. |
| en desenfoque | función | nulo | Desenfoque de devolución de llamada. |
El objeto de opciones puede contener cualquier propiedad y valor que desee. El único requerido es name .
| Propiedad | Tipo | Descripción | Requerido |
|---|---|---|---|
| nombre | cadena | El nombre de la opción. | Sí |
| valor | cadena | El valor de la opción. | Sí, si el tipo no es "grupo" |
| tipo | cadena | Si configura el tipo en "grupo", puede agregar una variedad de opciones que se agruparán | No |
| elementos | formación | Matriz de objetos de opción que se utilizarán si el tipo se establece en "grupo" | Sí, si type está configurado en "grupo" |
| desactivado | booleano | Establezca en true para deshabilitar esta opción | No |
Si establece una cadena como valor del atributo className , el componente la usará como base para todos los elementos. Si desea controlar completamente los nombres de las clases, puede pasar un objeto con nombres de clases. Existen las siguientes claves:
Si CSS no es suficiente, también puedes controlar el HTML para las diferentes partes del componente.
| Llamar de vuelta | argumentos | Descripción |
|---|---|---|
| opción de renderizado | optionsProps: objeto, optionData: objeto, optionSnapshot: objeto, className: cadena | Controla la representación de las opciones. |
| renderGroupHeader | nombre: cadena | Controla la representación del nombre del encabezado del grupo. |
| valor de renderizado | valueProps: objeto, instantánea: objeto, className: cadena | Controla la representación del elemento de valor/entrada. |
Los optionProps y valueProps son necesarios para que funcione el componente que renderiza. Por ejemplo:
< SelectSearch renderValue = { ( valueProps ) => < input { ... valueProps } / > } / >Parchelo si es necesario, pero asegúrese de no eliminar accesorios importantes.
La opción Instantánea es un objeto que contiene el estado del objeto: { selected: bool, highlighted: bool } .
Puede recuperar opciones de forma asincrónica con la propiedad getOptions . Puede devolver opciones directamente o mediante una Promise .
function getOptions ( query ) {
return new Promise ( ( resolve , reject ) => {
fetch ( `https://www.thecocktaildb.com/api/json/v1/1/search.php?s= ${ query } ` )
. then ( response => response . json ( ) )
. then ( ( { drinks } ) => {
resolve ( drinks . map ( ( { idDrink , strDrink } ) => ( { value : idDrink , name : strDrink } ) ) )
} )
. catch ( reject ) ;
} ) ;
} La función se ejecuta en cada actualización de la consulta de búsqueda, por lo que es posible que desees limitar las recuperaciones. Si devuelves una promesa, la clase is-loading se aplicará al elemento principal, dándote la oportunidad de cambiar la apariencia, como agregar una ruleta. La fetching propiedades también está disponible en la instantánea que se envía a las devoluciones de llamada de renderizado.
Hecho con contribuciones.rocks.
