react-select-component-animated

react-select-component-animated created using create-react-app.

Installation:

Run the following command:

npm install react-select-component-animated

react-select-component-animated

Un composant React pour les sélections animées avec des transitions fluides et personnalisables.

Exemple :

import './App.css';
import { Select } from 'react-select-component-animated/dist/Select';
function App() {
let options = ["nom", "prénom"]
return (
<div>
  <h1>Example of react-select-component-animated</h1>
  <Select options={options} />
</div>
);
}

export default App;

Props

Name	Description	Type
label	Une étiquette descriptive pour le composant de sélection. Exemple : "Choisissez une option".	String
options	Un tableau d'options disponibles pour la sélection. Exemple : ['Option 1', 'Option 2', 'Option 3'].	Array
searchInput	Indique si un champ de recherche doit être affiché pour filtrer les options. Exemple : true.	Boolean
fadeInDuration	Durée de l'animation de l'apparition du menu déroulant en CSS. Spécifiée en unités de temps CSS (comme s ou ms). Exemple : "0.3s".	String
fadeOutDuration	Durée de l'animation de la disparition du menu déroulant en CSS. Spécifiée en unités de temps CSS (comme s ou ms). Exemple : "0.3s".	String
debounceDelay	Délai de debounce en millisecondes pour la mise à jour du terme de recherche. Utilisé pour limiter la fréquence des mises à jour lors de la saisie dans le champ de recherche. Exemple : 300.	Number
onChange	Fonction de rappel appelée lorsque la sélection change. Reçoit la nouvelle option sélectionnée en argument. Exemple : function handleChange(selectedOption) { console.log(selectedOption); }	Function
value	La valeur actuellement sélectionnée. Peut être utilisée pour initialiser la sélection ou pour la mettre à jour de manière contrôlée. Exemple : "Option 1".	String

Explication des fonctionnalités

Initialisation et état :

useState initialise et gère l'état local, comme l'ouverture du menu (isOpen), l'option sélectionnée (selectedOption), le terme de recherche (searchTerm) et les options filtrées (filteredOptions).

Effets :

• useEffect initialise les options filtrées et met à jour les options disponibles et la sélection en réponse aux changements de props.

Gestion du menu déroulant :

• toggleDropdown ouvre et ferme le menu.
• handleOptionClick gère la sélection d'une option et ferme le menu.

Débounce :

• debounce limite la fréquence de mise à jour du terme de recherche pour améliorer les performances.

Clavier et focus :

• handleKeyDown et handleOptionKeyDown gèrent la navigation au clavier.
• handleBlur ferme le menu lorsque le focus est perdu.

Styles :

• containerStyle applique des variables CSS pour contrôler les animations.