Composant SelectMenu réutilisable pour React
npm install hrnet-select-menuComposant SelectMenu réutilisable pour React avec support clavier complet et accessibilité.
- 🎯 Accessibilité complète - Support clavier, ARIA, navigation
- ⌨️ Navigation clavier - Flèches, Entrée, Échap
- 🎨 Styles personnalisables - CSS variables pour le thème
- 📱 Responsive - S'adapte à tous les écrans
- 🔧 Contrôlé/Non-contrôlé - Support des deux modes
- 🚀 Léger - Pas de dépendances externes
``bash`
npm install hrnet-select-menu
`jsx
import { SelectMenu } from 'hrnet-select-menu';
const options = [
{ value: 'sales', label: 'Sales' },
{ value: 'marketing', label: 'Marketing' },
{ value: 'engineering', label: 'Engineering' }
];
function MyComponent() {
const [selected, setSelected] = useState('');
return (
value={selected}
onChange={(e) => setSelected(e.target.value)}
placeholder="Sélectionner un département..."
/>
);
}
`
| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| options | Array<{value: string, label: string}> | [] | Options disponibles |value
| | string | '' | Valeur sélectionnée (mode contrôlé) |defaultValue
| | string | '' | Valeur par défaut (mode non-contrôlé) |onChange
| | (event) => void | - | Callback de changement |placeholder
| | string | 'Select...' | Texte de placeholder |id
| | string | - | ID du composant |name
| | string | - | Nom du champ |required
| | boolean | false | Champ requis |
`css
:root {
--border: #e6e9ee;
--accent: #0b5fff;
--card: #fff;
--shadow: 0 8px 24px rgba(20,24,30,0.08);
}
.select-menu {
/ Vos styles personnalisés /
}
`
- Flèches ↑↓ : Naviguer dans les options
- Entrée : Sélectionner l'option
- Échap : Fermer le menu
- Tab : Navigation entre les champs
`jsx
import React, { useState } from 'react';
import { SelectMenu } from 'hrnet-select-menu';
function EmployeeForm() {
const [formData, setFormData] = useState({
department: '',
state: ''
});
const departments = [
{ value: 'sales', label: 'Sales' },
{ value: 'marketing', label: 'Marketing' },
{ value: 'engineering', label: 'Engineering' },
{ value: 'hr', label: 'Human Resources' }
];
const states = [
{ value: 'AL', label: 'Alabama' },
{ value: 'CA', label: 'California' },
{ value: 'NY', label: 'New York' },
{ value: 'TX', label: 'Texas' }
];
const handleChange = (field) => (e) => {
setFormData(prev => ({
...prev,
[field]: e.target.value
}));
};
return (
🧪 Tests
`bash
npm test
``MIT