1.0.1 • Published 6 months ago

react-native-dropdown-customizable v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
6 months ago
# 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 PropTypePar défautDescription
dataArray[]Liste des options du dropdown (objets avec label)
placeholderString"Sélectionnez une option"Texte affiché avant la sélection
isActionBooleanfalseDétermine si le dropdown est un bouton d'action
onSelectFunctionundefinedFonction callback appelée lorsque l'option est sélectionnée
dropdownHeaderStyleObjectnullStyle personnalisé pour l'en-tête du dropdown
dropdownHeaderTextStyleObjectnullStyle personnalisé pour le texte de l'en-tête
dropdownListStyleObjectnullStyle personnalisé pour la liste des options
dropdownItemStyleObjectnullStyle personnalisé pour chaque élément de la liste
dropdownItemTextStyleObjectnullStyle personnalisé pour le texte de chaque élément
containerStyleObjectnullStyle 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`.