react-select-component-animated v1.1.1

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

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.