1.7.0 • Published 6 months ago
custom-dropdown-react v1.7.0
Mon Custom Dropdown React Component
Un composant de dropdown personnalisé pour React.
Installation
Vous pouvez installer ce composant en utilisant npm ou yarn :
npm install mon-custom-dropdown-react
# ou
yarn add mon-custom-dropdown-react
Utilisation
Pour utiliser le composant Dropdown dans votre application React, vous devez l'importer comme suit :
import { Dropdown } from 'mon-custom-dropdown-react';
// Utilisez le composant Dropdown dans votre JSX
function App() {
return (
<div>
<h1>Mon Application React</h1>
<Dropdown title="Custom-title" children={['option 1', 'option 2', 'option 3']} onChange/>
</div>
);
}
export default App;
Le composant Dropdown peut être utilisé en passant les propriétés requises :
const App = () => {
return (
<div>
<Dropdown
title="Sélectionner une option"
children={[
{ name: "Option 1", keys: "key1" },
{ name: "Option 2", keys: "key2" },
// Ajoutez plus d'options au besoin
]}
onChange={(selectedOption) => {
console.log("Option sélectionnée :", selectedOption);
// Gérez l'option sélectionnée
}}
// Paramètre optionelle de personnalisation
size="16px"
color="white"
backgroundColor="white"
borderColor="#0056b3"
borderRadius="5px"
backgroundColorItem="#3f8cde"
colorItem="white"
backgroundColorItemHover="#b95959"
/>
</div>
)
}
Popriétés
- title (chaîne de caractères) : Le titre du menu déroulant.
- children (tableau) : Un tableau d'objets représentant les options du menu déroulant, chaque objet ayant une propriété name et keys.
- onChange (fonction) : Une fonction de rappel déclenchée lorsqu'une option est sélectionnée. Elle reçoit l'option sélectionnée en tant qu'argument.
- size (chaîne de caractères) : La taille de la police du bouton du menu déroulant (par défaut : "16px").
- color (chaîne de caractères) : La couleur du texte du bouton du menu déroulant (par défaut : "white").
- backgroundColor (chaîne de caractères) : La couleur de fond du bouton du menu déroulant (par défaut : "white").
- borderColor (chaîne de caractères) : La couleur de la bordure du bouton du menu déroulant (par défaut : "#0056b3").
- borderRadius (chaîne de caractères) : Le rayon de la bordure du bouton du menu déroulant (par défaut : "5px").
- backgroundColorItem (chaîne de caractères) : La couleur de fond des éléments du menu déroulant (par défaut : "#3f8cde").
- colorItem (chaîne de caractères) : La couleur du texte des éléments du menu déroulant (par défaut : "white").
- backgroundColorItemHover (chaîne de caractères) : La couleur de fond des éléments du menu déroulant au survol (par défaut : "#b95959").