react-native-dropdown-customizable

# react-native-dropdown-customizable
Un composant de dropdown entièrement personnalisable pour les applications React Native.

![npm](https://img.shields.io/npm/v/react-native-dropdown-customizable)
![npm](https://img.shields.io/npm/dw/react-native-dropdown-customizable)

## Table des matières
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Personnalisation](#personnalisation)
- [Contribution](#contribuer)
- [Licence](#licence)

## Installation

Pour installer ce package, exécutez la commande suivante :

```bash
npm install react-native-dropdown-customizable

Ou utilisez Yarn :

yarn add react-native-dropdown-customizable

Usage

Voici un exemple d'utilisation du composant Dropdown :

import Dropdown from 'react-native-dropdown-customizable';

const MyComponent = () => {
  return (
    <Dropdown
      data={[{ label: 'Option 1' }, { label: 'Option 2' }]}
      placeholder="Sélectionnez une option"
      isAction={true}
      onSelect={(item) => console.log(item)}
      dropdownHeaderStyle={{ backgroundColor: '#007bff' }}
      dropdownHeaderTextStyle={{ color: '#fff' }}
      dropdownListStyle={{ backgroundColor: '#f1f1f1' }}
      dropdownItemStyle={{ borderBottomWidth: 1, borderBottomColor: '#ddd' }}
      dropdownItemTextStyle={{ color: '#007bff' }}
      containerStyle={{ marginBottom: 20 }}
    />
  );
};

Illustration du composant

Voici à quoi pourrait ressembler le composant dans votre application :

Props

Nom de la Prop	Type	Par défaut	Description
data	Array	[]	Liste des options du dropdown (objets avec label)
placeholder	String	"Sélectionnez une option"	Texte affiché avant la sélection
isAction	Boolean	false	Détermine si le dropdown est un bouton d'action
onSelect	Function	undefined	Fonction callback appelée lorsque l'option est sélectionnée
dropdownHeaderStyle	Object	null	Style personnalisé pour l'en-tête du dropdown
dropdownHeaderTextStyle	Object	null	Style personnalisé pour le texte de l'en-tête
dropdownListStyle	Object	null	Style personnalisé pour la liste des options
dropdownItemStyle	Object	null	Style personnalisé pour chaque élément de la liste
dropdownItemTextStyle	Object	null	Style personnalisé pour le texte de chaque élément
containerStyle	Object	null	Style personnalisé pour le conteneur du dropdown

Personnalisation

Vous pouvez personnaliser l'apparence du dropdown en utilisant les propriétés de style. Par exemple :

<Dropdown
  data={[{ label: 'Option 1' }, { label: 'Option 2' }]}
  placeholder="Sélectionnez une option"
  isAction={true}
  onSelect={(item) => console.log(item)}
  dropdownHeaderStyle={{ backgroundColor: '#007bff' }}
  dropdownHeaderTextStyle={{ color: '#fff' }}
  dropdownListStyle={{ backgroundColor: '#f1f1f1' }}
  dropdownItemStyle={{ borderBottomWidth: 1, borderBottomColor: '#ddd' }}
  dropdownItemTextStyle={{ color: '#007bff' }}
  containerStyle={{ marginBottom: 20 }}
/>

Résultat visuel

Voici un aperçu de ce à quoi pourrait ressembler votre dropdown une fois personnalisé :

Contribuer

1. Forkez le repository.
2. Créez une nouvelle branche (git checkout -b feature/your-feature).
3. Commitez vos modifications (git commit -am 'Add new feature').
4. Poussez vos changements (git push origin feature/your-feature).
5. Créez une nouvelle Pull Request.

Crédits

Ce projet a été développé par Leon Nzita Puindi. Vous pouvez nous suivre pour plus de mises à jour sur le développement de cette bibliothèque et d'autres projets numériques.

### Détails importants du README

1. **Installation** : Section sur la façon d'installer le package avec npm ou yarn.
2. **Usage** : Exemple clair avec un code fonctionnel, accompagné d'une explication.
3. **Props** : Liste des propriétés (props) que le composant accepte, avec des descriptions et des valeurs par défaut.
4. **Personnalisation** : Montre comment personnaliser l'apparence du dropdown avec des styles.
5. **Contribution** : Instructions pour que d'autres contributeurs ajoutent des fonctionnalités ou corrigent des bugs.
6. **Licence** : Mention de la licence MIT pour un usage libre et open-source.

### Images de démonstration
Les images de démonstration (`![Dropdown]`) peuvent être remplacées par des captures d'écran réelles de votre composant dans une application. Vous pouvez utiliser un outil de capture d'écran ou un simulateur pour obtenir une image.

Avec ce modèle, vous aurez un README à la fois informatif et professionnel pour votre package `react-native-dropdown-customizable`.