Créez de belles listes déroulantes avec React Select

Une entrée de sélection est un composant d'application Web utile qui vous permet de choisir une valeur parmi de nombreuses options sans prendre beaucoup de place. Mais le style par défaut peut être terne et entrer en conflit avec le reste de votre conception.

React Select fournit une solution flexible et personnalisable pour améliorer l'apparence et la fonctionnalité des entrées déroulantes.

Installation de React Select

Intégration de React à d'autres bibliothèques ou technologies, comme React Select, React Redux et bien d'autres, peuvent simplifier le processus de développement.

Pour démarrer avec React Select, vous devez l'installer dans votre projet. À faites cela en utilisant npm, exécutez cette commande de terminal dans le répertoire de votre projet :

npm i --save react-select

Cela installera et configurera la bibliothèque dans votre projet React, afin que vous puissiez commencer à l'utiliser.

Création d'entrées Select avec React Select

Maintenant que vous avez configuré la bibliothèque, vous pouvez l'utiliser pour créer des entrées sélectionnées. Pour ce faire, vous utiliserez le Sélectionner composant. Il s'agit d'un composant hautement personnalisable qui permet aux utilisateurs de sélectionner des options dans une liste.

Voici un exemple d'utilisation du composant Select :

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

Cet exemple commence par importer le Sélectionner composant de "réagir-sélectionner”. Il définit un choix tableau avec trois objets, chacun avec un valeur et un étiquette propriété. La propriété value représente la valeur que le formulaire enverra au backend lorsque vous le soumettez. La propriété label est le texte que le composant Select affichera dans la liste déroulante.

Lorsque vous effectuez le rendu du composant Select, transmettez-lui le tableau d'options à l'aide du choix soutenir.

Avec ce bloc de code, la bibliothèque React Select générera une liste déroulante comme celle-ci :

Personnalisation des entrées sélectionnées

React Select propose différentes manières de personnaliser les entrées sélectionnées. Vous pouvez utiliser des classes CSS ou appliquer des styles en ligne directement aux entrées sélectionnées, selon vos préférences.

Personnalisation avec les classes CSS

La bibliothèque React Select fournit un nom du cours accessoire pour le Sélectionner composant. Utilisez cet accessoire className pour appliquer une feuille de style en cascade (CSS) personnalisée styles à vos composants Select.

Par exemple:

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 (



'select'/>
 </div>
 )
}
exportdefault App

Le bloc de code ci-dessus est similaire au précédent, mais il utilise le nom du cours prop pour appliquer une classe CSS personnalisée au Sélectionner composant. Fournissez un nom dans la prop className et vous pourrez l'utiliser pour appliquer des styles CSS au composant :

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

Après avoir défini les styles, votre entrée de sélection ressemblera à ceci :

Personnalisation avec des styles en ligne

Vous pouvez également définir des styles en ligne dans un objet que vous transmettez via le modes accessoire du Sélectionner composant. Cela vous donne plus de contrôle sur le style des éléments individuels.

Voici un exemple :

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

L'objet accessoire, styles personnalisés, contient les propriétés de style pour le composant Select contrôle, option, et menu les pièces. Ces propriétés sont des fonctions qui prennent deux arguments: styles de base et État.

Le paramètre baseStyles représente les styles par défaut fournis par React Select, tandis que le paramètre state représente l'état actuel de l'élément. Dans cet exemple, les fonctions utilisent l'opérateur spread pour combiner les baseStyles avec des styles supplémentaires pour chaque partie du composant.

Après avoir appliqué ces styles, votre entrée de sélection devrait ressembler à ceci :

Ajout de fonctionnalités aux entrées sélectionnées

React Select fournit plusieurs fonctionnalités pour améliorer la fonctionnalité des entrées sélectionnées. Vous pouvez activer les fonctionnalités de sélection multiple et de recherche, et même créer des composants déroulants personnalisés.

Fonctionnalité de sélection multiple

Pour activer la fonctionnalité de sélection multiple dans vos listes déroulantes, transmettez le estMulti prop au composant Select. Cela permet aux utilisateurs de sélectionner plusieurs options dans le menu déroulant.

Par exemple:

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

Cet exemple montre comment utiliser le estMulti prop pour ajouter la fonctionnalité de sélection multiple à vos entrées sélectionnées.

Fonctionnalité de recherche

La bibliothèque React Select fournit une fonctionnalité de recherche intégrée pour filtrer facilement les options. Par défaut, le composant Select affiche l'entrée de recherche lorsque vous ouvrez la liste déroulante. Les utilisateurs peuvent saisir l'entrée de recherche pour filtrer les options disponibles.

Pour activer la fonctionnalité de recherche, transmettez le estRecherchable soutenir le Sélectionner composant. Comme le estMulti prop, isSearchable accepte une valeur booléenne.

Voici un exemple d'utilisation de la prop isSearchable pour activer la fonctionnalité de recherche :

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

Le rendu du bloc de code ci-dessus affichera une entrée de sélection avec une fonctionnalité de recherche. Il ressemblera et fonctionnera comme ceci :

Créer des composants déroulants personnalisés

React Select vous permet de créer des composants déroulants personnalisés à l'aide de l'accessoire composants. Vous pouvez remplacer les composants par défaut fournis par React Select et personnaliser l'apparence et le comportement de la liste déroulante selon vos goûts.

Par exemple:

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

Ce bloc de code montre comment créer des composants personnalisés pour une entrée sélectionnée à l'aide de l'outil Composants accessoire du Sélectionner composant. Il importe le Composants objet qui est une collection de composants prédéfinis que vous pouvez utiliser pour personnaliser l'apparence et le comportement de divers éléments dans vos entrées sélectionnées.

Le code définit deux composants fonctionnels: Option personnalisée et Indicateur déroulant personnalisé. Le composant CustomOption prend un objet comme paramètre. Cet objet contient diverses propriétés fournies par React Select, comme accessoires internes et étiquette.

Le composant CustomDropdownIndicator prend accessoires comme paramètre. Ce composant affiche un indicateur déroulant personnalisé avec un symbole de flèche vers le bas. Le code crée un composants personnalisés objet qui mappe les composants CustomOption et CustomDropdownIndicator aux composants correspondants Option et Indicateur déroulant clés.

Enfin, ce code transmet l'objet customComponents à la prop composants du composant Select. Cela affichera une entrée de sélection avec les composants personnalisés, ressemblant à ceci :

Les composants standard peuvent être plus puissants et plus attrayants

React Select est une bibliothèque puissante qui vous permet de créer des entrées de sélection belles et élégantes dans React. Vous pouvez personnaliser les entrées sélectionnées, leur ajouter des fonctionnalités et créer des composants déroulants personnalisés. En profitant de cette bibliothèque, vous pouvez améliorer l'apparence et l'expérience utilisateur de vos applications React.