Aller au contenu principal

Utiliser le downshift ITN

Afin de pouvoir plus facilement implémenter des combobox sans les problématiques de flexibilité de react-select ou d'accessibilité pour les implémentations 100% custom, ITN utilise la librairie Downshift. Cette librairie donne des outils afin d'implémenter des autocomplete et des combobox de manière accessible tout en laissant la liberté à la personne l'utilisant de choisir la maniére dont il veut l'afficher.

Le code du composant downshift se trouve ici https://github.com/ITNetworkParis/downshift-chakra.

Vous pouvez simplement copier coller le code présent dans src/stories/components.

Il vous faudra également récupérer la partie de théme chakra présent dans src/stories/theme.js.

Le storybook est consultable ici

fonctionnement de loadSelectItems

Cette fonction est la props la plus importante du downshift et la celle obligatoire.

C'est elle qui est en charge du chargement des items à sélectionner en fonction de la page et de la recherche texte de l'utilisateur.

Vous avez:

  • Un exemple d'usage basique ici
  • Un exemple d'usage pour une liste fixe ICI
  • Un exemple d'usage par API ici