react selectrix

Réagir à Selectrix

Un remplacement React Select beau, matérialisé, facile à utiliser et flexible

Démo

Découvrez la démo et utilisez des exemples ici !

Installation

 npm i --save-dev react-selectrix

Documentation

https://github.com/stratos-vetsos/react-selectrix/

Importer dans votre projet

 import Selectrix from "react-selectrix";

Exemple de base

 < Selectrix
	multiple = { true }
	materialize = { true }
	options = { [
		{
			key : "javascript" ,
			label : "Javascript"
		} ,
		{
			key : "go" ,
			label : "Go"
		} ,
		{
			key : "ruby" ,
			label : "Ruby On Rails"
		} ,
		{
			key : "php" ,
			label : "PHP"
		}
	] }
	onChange = { value => console . log ( value ) }
/> 

Accessoires

Nom	Taper	Valeur par défaut	Description
choix	tableau	[]	Un tableau des options disponibles (objets avec des paires "key", "label" et éventuellement la propriété "disabled").
multiple	booléen	FAUX	Indique si Select prend en charge plusieurs valeurs.
consultable	booléen	vrai	Si le Select est consultable .
aucun message de résultats	chaîne	Aucun résultat ne correspond	Le message de non-résultat correspond .
se concrétiser	booléen	vrai	Si le style de la sélection doit être matérialisé ou par défaut.
valeur par défaut	booléen/tableau/chaîne	FAUX	Si vous avez des valeurs présélectionnées, utilisez cette propriété. Utilisez un tableau de touches d'option pour des sélections multiples, ou une clé comme chaîne pour une sélection unique.
cases à cocher	booléen	FAUX	Définissez ceci sur true si vous souhaitez afficher les cases à cocher au lieu des éléments de liste.
hauteur	nombre	190	La hauteur de la liste déroulante.
placeHolderInside	booléen	FAUX	Si l'espace réservé doit être une option.
espace réservé	chaîne	Veuillez sélectionner	L’espace réservé du Select.
estOuvert	booléen	FAUX	Si le Select doit être rendu ouvert.
flèche	booléen	vrai	S'il faut afficher une flèche sur l'en-tête de Select.
désactivé	booléen	FAUX	Si la sélection doit être désactivée.
barre de défilement personnalisée	booléen	FAUX	Une barre de défilement personnalisée (uniquement pour Chrome)
resterOuvert	booléen	FAUX	Si le Select doit rester ouvert ou non.
virguleSéparé	booléen	FAUX	Si vous souhaitez que les valeurs sélectionnées soient une chaîne séparée par des virgules, définissez-la sur "true". ( Disponible uniquement avec plusieurs accessoires définis sur "true". )
ligne unique	booléen	FAUX	Où les valeurs sélectionnées ( Select's Header ) doivent être contenues sur une seule ligne.
vie	booléen	FAUX	Mode Dernier entré, premier sorti . La dernière sélection de l'utilisateur passe en premier. ( Disponible uniquement avec plusieurs accessoires définis sur "true". )
index de recherche	booléen	vrai	Activer la recherche par champs Index et Valeur
sélectionnerToutBouton	booléen	FAUX	Indique si un "bouton Sélectionner tout" doit être visible sur l'en-tête de Select.
estDropDown	booléen	vrai	Définissez ceci sur true si vous souhaitez utiliser Select as a Dropdown . Lorsque vous sélectionnez une option, la sélection se réduit et l'en-tête continue d'avoir l'espace réservé comme valeur.
balises	booléen	FAUX	S'il faut prendre en charge les balises personnalisées.
Clés personnalisées	objet / booléen	FAUX	Passez un objet pour modifier les touches d'option par défaut ( key, label ). Exemple de syntaxe : { key: "url", label: "title" } , pour changer la clé en "url" et l'étiquette en "title".
ajax	booléen / objet	FAUX	S'il faut activer ajax. La bibliothèque prend en charge les appels asynchrones via l'API de récupération. Propriétés par défaut disponibles de l'objet ajax : { url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }. Vous pouvez trouver des détails sur toutes les propriétés des objets ajax, dans la section suivante et sur notre page de démonstration.
onRenderOption	fonction / booléen	FAUX	Utilisez cette fonction pour afficher les éléments d'option personnalisés
surRenderSelection	fonction / booléen	FAUX	Utilisez cette fonction pour afficher les éléments sélectionnés personnalisés
surChange	fonction	indéfini	Utilisez ce rappel pour intercepter le déclencheur de modification de Select.
surOuvert	fonction	indéfini	Utilisez ce rappel pour intercepter le déclencheur d'ouverture de Select.
surFermer	fonction	indéfini	Utilisez ce rappel pour attraper le déclencheur de fermeture de Select.

Accessoire Ajax - panne

Nom	Taper	Valeur par défaut	Description
URL	chaîne	''	L'URL sur laquelle Select va récupérer les options disponibles.
en-têtes	objet	{}	Transmettez tous les en-têtes que vous souhaitez récupérer dans l'API.
anti-rebond	nombre	200	L'anti-rebond des appels ajax en millisecondes.
récupérerSurRecherche	booléen	FAUX	Que vous ne souhaitiez pas que les options soient préremplies lorsque la sélection s'ouvre, mais que vous souhaitiez les interroger en fonction de la valeur de recherche de l'utilisateur.
q	chaîne	''	Cette propriété accompagne la propriété fetchOnSearch, définie sur "true". En fonction de l'API REST qui vous propose des options, vous devez modifier cette valeur en conséquence. par exemple "&search={q}". Partout où vous utilisez la pseudo variable {q}, la requête de recherche de l'utilisateur sera injectée dans la requête finale.
clé imbriquée	chaîne / booléen	FAUX	Si votre API REST renvoie les données réelles à un niveau plus profond, à l'intérieur d'une clé imbriquée, disons "articles", définissez nestedKey sur "articles".
invite de recherche	booléen	vrai	Cette propriété accompagne la propriété fetchOnSearch et indique à l'utilisateur combien de caractères supplémentaires doivent saisir avant que la recherche ajax n'ait lieu.
minLongueur	nombre	1	Cette propriété va de pair avec la propriété fetchOnSearch et searchPrompt défini sur "true". Il s'agit de la longueur minimale de caractères que l'utilisateur doit saisir avant que la recherche d'appel ajax n'ait lieu.

Rappels - panne

Nom	Arguments	Description
surChange	valeur	L'objet sélectionné si la sélection est unique et un tableau d'objets si la sélection est multiple.
onRenderOption	option, indice	L'option qui va être rendue et son index correspondant.
surRenderSelection	sélectionné, paramètres, désélectionner	L'objet sélectionné, les paramètres de sélection et une fonction de rappel à utiliser pour la désélection.
surOuvert	N / A
surFermer	N / A

Exemple Ajax

Un grand merci à newsapi.org pour son excellente API. Vérifiez cet exemple en action, dans notre page de démonstration.

 < Selectrix
	customKeys = { {
		key : "url" ,
		label : "title"
	} }
	ajax = { {
		url : "https://newsapi.org/v2/everything?q=bitcoin&sortBy=publishedAt&apiKey=9342a9a707ca49c4b2da34e9ea238ea6" ,
		nestedKey : "articles"
	} }
/>

Exemple Ajax avec fetchOnSearch

Vérifiez cet exemple en action, dans notre page de démonstration.

 < Selectrix
	multiple = { true }
	stayOpen = { true }
	materialize = { true }
	customKeys = { {
		key : "url" ,
		label : "title"
	} }
	ajax = { {
		url : "https://newsapi.org/v2/top-headlines?apiKey=9342a9a707ca49c4b2da34e9ea238ea6" ,
		fetchOnSearch : true ,
		q : "&q={q}" ,
		nestedKey : "articles" ,
		minLength : 3 ,
		debounce : 300
	} }
/>

Exemple de balises

Vérifiez cet exemple en action, dans notre page de démonstration.

 < Selectrix
	multiple = { true }
	materialize = { true }
	tags = { true }
	options = { [
		{
			key : "hotdog" ,
			label : "Hot Dog"
		} ,
		{
			key : "pizza" ,
			label : "Pizza"
		}
	] }
	onChange = { value => console . log ( value ) }
/>

Exemple de rendu personnalisé

Vérifiez cet exemple en action, dans notre page de démonstration.

 < Selectrix
	multiple = { true }
	materialize = { true }
	options = { [
		{
			key : "javascript" ,
			label : "Javascript"
		} ,
		{
			key : "go" ,
			label : "Go"
		} ,
		{
			key : "ruby" ,
			label : "Ruby On Rails"
		} ,
		{
			key : "php" ,
			label : "PHP"
		}
	] }
	onRenderOption = { onRenderOption }
	onRenderSelection = { onRenderSelection }
	onChange = { value => console . log ( value ) }
/>

const onRenderOption = ( option , index ) => (
	< span > < i className = "fa fa-laptop" > </ i > { option . label } </ span >
)

const onRenderSelection = ( selected , settings , deselect ) => (
	< span style = { { marginRight : 10 , border : "1px solid #eee" , padding : 5 } } >
		{ selected . label }
		< i style = { { paddingLeft : 5 , cursor : "pointer" } } onClick = { deselect } className = "fa fa-window-close" > </ i >
	</ span >
)

Licence

Licence MIT. Stratos Vetsos.

Cotisations

Les contributions sont plus que bienvenues. Exécutez npm install && npm start sur master et vous êtes prêt à partir ! Le CONTRIBUTING.md sera bientôt publié.