react select search
1.0.0
Tout d’abord, je tiens à vous remercier tous pour votre incroyable soutien au fil des années. Ce fut l'un de mes premiers projets open source et aussi mon premier succès. Je suis plus que reconnaissant pour les 33 ! contributeurs, il n'aurait pas été possible de mener à bien ce projet sans vous.
Il s’est passé beaucoup de choses l’année dernière. J'ai eu mon premier fils, j'ai eu quelques missions indépendantes qui ont pris beaucoup de temps et quelques startups qui ont grandi. Cela a pris du temps avec l'open source et je sens que je ne peux plus rendre justice à ce composant. Pas tout seul, du moins.
Je crois toujours en un petit composant de sélection ultra rapide et sans dépendance. Si quelqu'un souhaite co-maintenir cela avec moi, veuillez nous contacter pour discuter des prochaines étapes. Envoyez-moi un e-mail à [email protected] ou contactez-moi sur Twitter
Installez-le avec npm ( npm i react-select-search ) ou fil ( yarn add react-select-search ) et importez-le comme vous le feriez normalement.
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" / >Pour plus d'exemples, vous pouvez jeter un œil dans le répertoire des histoires.
Vous aurez également besoin de CSS pour que tout soit correct. Un exemple de thème peut être trouvé dans style.css. Vous pouvez également l'importer :
import 'react-select-search/style.css' Pour une utilisation avec SSR, vous devrez peut-être utiliser le bundle commonjs (react-select-search/dist/cjs). Si vous souhaitez utiliser l'exemple de thème (style.css), vous devez vérifier si votre script de construction manipule les noms de classe, par exemple les réduit. Si tel est le cas, vous pouvez utiliser des modules CSS pour obtenir les noms de classe du fichier style.css et les appliquer à l'aide de l'objet className. Un exemple peut être vu ici ainsi qu'ici https://react-select-search.com/?path=/story/custom--css-modules.
Si vous souhaitez un contrôle complet (plus que le style et les moteurs de rendu personnalisés), vous pouvez utiliser des hooks pour transmettre des données à vos propres composants et les créer vous-même.
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 >
) ;
} ; Vous trouverez ci-dessous toutes les options disponibles que vous pouvez transmettre au composant. Des options sans valeurs par défaut sont requises.
| Nom | Taper | Défaut | Description |
|---|---|---|---|
| choix | tableau | Voir la documentation des options ci-dessous | |
| obtenirOptions | fonction | nul | Obtenez des options via un appel de fonction, peut renvoyer une promesse d'utilisation asynchrone. Voir les options d'obtention pour en savoir plus. |
| options de filtre | tableau | nul | Un tableau de fonctions qui prend les dernières options filtrées et une requête de recherche le cas échéant. S'exécute après getOptions. |
| valeur | chaîne, tableau | nul | La valeur doit être un tableau en cas de mode multiple. |
| multiple | booléen | FAUX | Définissez sur true si vous souhaitez autoriser plusieurs options sélectionnées. |
| recherche | booléen | FAUX | Définir sur true pour activer la fonctionnalité de recherche |
| désactivé | booléen | FAUX | Désactive toutes les fonctionnalités |
| fermerSurSélectionner | booléen | vrai | La zone de sélection sera floue par défaut lors de la sélection d'une option. Définissez ceci sur false pour éviter ce comportement. |
| anti-rebond | nombre | 0 | Nombre de ms à attendre avant d'appeler pour obtenir les options lors de la recherche. |
| espace réservé | chaîne | chaîne vide | Affiché si aucune option n'est sélectionnée et/ou lorsque le champ de recherche est focalisé avec une valeur vide. |
| identifiant | chaîne | nul | ID HTML sur l'élément de niveau supérieur. |
| saisie semi-automatique | chaîne, marche/arrêt | désactivé | Désactive/active la fonctionnalité de saisie semi-automatique dans le champ de recherche. |
| mise au point automatique | booléen | FAUX | Mise au point automatique sur sélection |
| Nom de classe | chaîne, objet | champ de recherche | Définissez une chaîne de classe de base ou transmettez une fonction pour un contrôle complet. Consultez les noms de classe personnalisés pour en savoir plus. |
| Option de rendu | fonction | nul | Fonction qui restitue les options. Consultez les moteurs de rendu personnalisés pour en savoir plus. |
| renderGroupHeader | fonction | nul | Fonction qui restitue l'en-tête du groupe. Consultez les moteurs de rendu personnalisés pour en savoir plus. |
| valeur de rendu | fonction | nul | Fonction qui restitue le champ valeur/recherche. Consultez les moteurs de rendu personnalisés pour en savoir plus. |
| message vide | Nœud de réaction | nul | Définissez un message vide pour la liste d'options vide, vous pouvez fournir une fonction de rendu sans arguments à la place d'un message de chaîne simple |
| surChange | fonction | nul | Fonction pour recevoir et gérer les changements de valeur. |
| surFocus | fonction | nul | Rappel de focus. |
| surFlou | fonction | nul | Rappel de flou. |
L'objet options peut contenir toutes les propriétés et valeurs de votre choix. Le seul obligatoire est name .
| Propriété | Taper | Description | Requis |
|---|---|---|---|
| nom | chaîne | Le nom de l'option | Oui |
| valeur | chaîne | La valeur de l'option | Oui, si le type n'est pas "groupe" |
| taper | chaîne | Si vous définissez le type sur "groupe", vous pouvez ajouter un tableau d'options qui seront regroupées | Non |
| articles | tableau | Tableau d'objets d'option qui seront utilisés si le type est défini sur "group" | Oui, si type est défini sur "groupe" |
| désactivé | booléen | Définir sur true pour désactiver cette option | Non |
Si vous définissez une chaîne comme valeur d'attribut className , le composant l'utilisera comme base pour tous les éléments. Si vous souhaitez contrôler entièrement les noms de classe, vous pouvez transmettre un objet avec des noms de classe. Les clés suivantes existent :
Si CSS ne suffit pas, vous pouvez également contrôler le HTML des différentes parties du composant.
| Rappel | Args | Description |
|---|---|---|
| Option de rendu | optionsProps : objet, optionData : objet, optionSnapshot : objet, className : chaîne | Contrôle le rendu des options. |
| renderGroupHeader | nom : chaîne | Contrôle le rendu du nom de l'en-tête du groupe |
| valeur de rendu | valueProps : objet, instantané : objet, className : chaîne | Contrôle le rendu de l'élément value/input |
Les optionProps et valueProps sont nécessaires au fonctionnement du composant que vous restituez. Par exemple:
< SelectSearch renderValue = { ( valueProps ) => < input { ... valueProps } / > } / >Monkeypatch si vous en avez besoin, mais assurez-vous de ne pas supprimer les accessoires importants.
L'optionSnapshot est un objet qui contient l'état de l'objet : { selected: bool, highlighted: bool } .
Vous pouvez récupérer les options de manière asynchrone avec la propriété getOptions . Vous pouvez soit renvoyer les options directement, soit via une 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 fonction s'exécute à chaque mise à jour de la requête de recherche, vous souhaiterez donc peut-être limiter les récupérations. Si vous renvoyez une promesse, la classe is-loading sera appliquée à l'élément principal, vous donnant la possibilité de modifier l'apparence, comme en ajoutant une roulette. La fetching de propriété est également disponible dans l'instantané envoyé à vos rappels de rendu.
Réalisé avec contrib.rocks.
