Le contrôle de sélection pour React. Initialement conçue pour une utilisation dans Keystonejs.
Voir react-select.com pour les démos en direct et les documents complets.
react-select est financé par ThinkMill et Atlassian. Nous sommes un projet open source qui est continuellement soutenu par la communauté.
React SELECT vous aide à développer des composants puissants puissants qui ne font que fonctionner hors de la boîte, sans vous empêcher de personnaliser les pièces qui sont importantes pour vous.
Pour l'histoire derrière ce composant, regardez la conversation de Jed à React Conf 2019 - Building React Select
Les fonctionnalités incluent:
La façon la plus simple d'utiliser React-Select est de l'installer à partir de NPM et de la créer dans votre application avec WebPack.
yarn add react-select
Puis utilisez-le dans votre application:
import React , { useState } from 'react' ;
import Select from 'react-select' ;
const options = [
{ value : 'chocolate' , label : 'Chocolate' } ,
{ value : 'strawberry' , label : 'Strawberry' } ,
{ value : 'vanilla' , label : 'Vanilla' } ,
] ;
export default function App ( ) {
const [ selectedOption , setSelectedOption ] = useState ( null ) ;
return (
< div className = "App" >
< Select
defaultValue = { selectedOption }
onChange = { setSelectedOption }
options = { options }
/ >
< / div >
) ;
} Les accessoires communs que vous pouvez souhaiter spécifier comprennent:
autoFocus - Focus le contrôle lorsqu'il monteclassName - Appliquez un nom de classe au contrôleclassNamePrefix - Appliquez des noms de classe aux éléments intérieurs avec le préfixe donnéisDisabled - Désactivez le contrôleisMulti - permettre à l'utilisateur de sélectionner plusieurs valeursisSearchable - Permettez à l'utilisateur à rechercher des options de correspondancename - Générez une entrée HTML avec ce nom, contenant la valeur actuelleonChange - Abonnez-vous aux événements de changementoptions - Spécifiez les options parmi lesquelles l'utilisateur peut sélectionnerplaceholder - Modifiez le texte affiché lorsqu'aucune option n'est sélectionnéenoOptionsMessage - ({InputValue: String}) => String | NULL - Texte à afficher lorsqu'il n'y a pas d'optionsvalue - Contrôlez la valeur actuelleVoir la documentation des accessoires pour une documentation complète sur les supports React-Selects d'accessoires.
Vous pouvez contrôler les accessoires suivants en leur fournissant des valeurs. Si vous ne le faites pas, React-Select les gérera pour vous.
value / onChange - Spécifiez la valeur actuelle du contrôlemenuIsOpen / onMenuOpen / onMenuClose - contrôler si le menu est ouvertinputValue / onInputChange - Contrôlez la valeur de l'entrée de recherche (modifiant cela mettra à jour les options disponibles)Si vous ne fournissez pas ces accessoires, vous pouvez définir la valeur initiale de l'état qu'ils contrôlent:
defaultValue - Définissez la valeur initiale du contrôledefaultMenuIsOpen - Définissez la valeur ouverte initiale du menudefaultInputValue - Définissez la valeur initiale de l'entrée de recherche React-Select expose deux méthodes publiques:
focus() - focus le contrôle programmatiquementblur() - Blur le contrôle programmatiquement Vérifiez les documents pour plus d'informations sur:
La version V5 représente une réécriture de JavaScript à TypeScript. Les types pour V4 et les versions antérieures sont disponibles chez @Types. Voir le guide TypeScript pour utiliser les types à partir de la v5.
Merci à tous ceux qui ont contribué à ce projet. Ce fut une balade sauvage.
Si vous aimez React Select, vous devriez me suivre sur Twitter!
Criez à Joss Mackison, Charles Lee, Ben Conolly, Tom Walker, Nathan Bierema, Eric Bonow, Emma Hamilton, Dave Brotherstone, Brian Vaughn et l'équipe du système de design Atlassian qui, avec de nombreux autres contributeurs, a rendu cela possible ❤️
MIT sous licence. Copyright (c) Jed Watson 2022.
