dropdowndelamort

dropdowndelamort est un composant dropdown pour React permettant de créer facilement des menus déroulants stylisés avec une grande flexibilité.

À propos

Ce projet fournit un composant dropdown pour les applications React, permettant aux utilisateurs de sélectionner une option parmi plusieurs choix dans une interface utilisateur intuitive. Le composant utilise React pour la gestion de l'état et Vite pour le développement et la construction.

Fonctionnalités

- Menu déroulant stylisé et personnalisable. - Supporte les options de style via des classes CSS. - Possibilité de gérer l'état de sélection avec une fonction de rappel onChange.

Pour utiliser dropdowndelamort, assurez-vous d'avoir les éléments suivants installés :

react: 18.3.1
react-dom: 18.3.1

Installation

npm install dropdowndelamort

Props

- **id**: string (optionnel) - Identifiant unique pour le bouton et la liste.
- **selection**: array - Liste des options à afficher dans le menu déroulant.
- **defaultText**: string - Texte par défaut affiché lorsque aucune option n'est sélectionnée.
- **buttonClass**: string - Classe CSS pour le bouton du dropdown.
- **listClass**: string - Classe CSS pour la liste des options.
- **itemClass**: string - Classe CSS pour chaque élément de la liste.
- **value**: string (optionnel) - Valeur par défaut sélectionnée.
- **onChange**: function - Fonction callback appelée lorsque l'utilisateur sélectionne une option.

Utilisation

import Dropdown from 'dropdowndelamort';
import { useState } from 'react';

function MyComponent() {
    const STATES = [
        { value: 'CA', label: 'California' },
        { value: 'NY', label: 'New York' },
        { value: 'TX', label: 'Texas' },
    ];
    
    const STATE_DEFAULT_TEXT = 'Select a state';
    
    const fields = [
        {
            type: 'dropdown',
            id: 'state',
            name: 'state',
            label: 'State',
            options: STATES,
            defaultText: STATE_DEFAULT_TEXT,
        },
    ];

    const [selectedValue, setSelectedValue] = useState('');

    const handleChange = (e) => {
        setSelectedValue(e.target.value);
    };

    return (
        <div>
            {fields.map(field => {
                if (field.type === 'dropdown') {
                    return (
                        <Dropdown
                            key={field.id}
                            id={field.id}
                            selection={field.options}
                            defaultText={field.defaultText}
                            value={selectedValue}
                            onChange={handleChange}
                        />
                    );
                }
                return null;
            })}
        </div>
    );
}

export default MyComponent;

Licence

Ce projet est sous la licence MIT. Consultez le fichier LICENSE pour plus d'informations.