# dark-light-dropdown

> a dropdown with dark or light theme

Latest version **0.4.0** (published 2024-01-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install dark-light-dropdown
pnpm add dark-light-dropdown
yarn add dark-light-dropdown
bun add dark-light-dropdown
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2024-01-14 |
| First published | 2023-12-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 183.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nellylie |

## Links

- npm: https://www.npmjs.com/package/dark-light-dropdown
- npm.io page: https://npm.io/package/dark-light-dropdown

## Dependencies (6)

- [@rollup/plugin-babel](https://npm.io/package/@rollup/plugin-babel.md) ^6.0.4
- [rollup-plugin-terser](https://npm.io/package/rollup-plugin-terser.md) ^7.0.2
- [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^4.0.2
- [rollup-plugin-replace](https://npm.io/package/rollup-plugin-replace.md) ^2.2.0
- [@rollup/plugin-commonjs](https://npm.io/package/@rollup/plugin-commonjs.md) ^25.0.7
- [rollup-plugin-peer-deps-external](https://npm.io/package/rollup-plugin-peer-deps-external.md) ^2.2.4

## Recent versions

- 0.4.0 (latest) — 2024-01-14
- 0.3.9 — 2024-01-14
- 0.3.8 — 2024-01-08
- 0.3.7 — 2024-01-08
- 0.3.6 — 2024-01-08
- 0.3.4 — 2024-01-08
- 0.3.3 — 2024-01-08
- 0.3.2 — 2024-01-08
- 0.3.1 — 2024-01-08
- 0.3.0 — 2024-01-08
- 0.2.9 — 2024-01-08
- 0.2.8 — 2024-01-08
- 0.2.7 — 2024-01-08
- 0.2.6 — 2024-01-04
- 0.2.5 — 2024-01-04
- … 15 more at https://npm.io/package/dark-light-dropdown/versions

## README

# Composant DropDown

Un composant dropdown permettant de selectionner un élement dans une liste d'objets ou une liste de chaines de caractères pour les applications React, avec la possibilité de choisir entre un thème clair ou sombre.

## Installation

Ajoutez le composant DropDown à votre projet, Assurez-vous d'avoir les dépendances suivantes dans votre projet :

- `react` et `react-dom`

## Utilisation

Voici comment vous pouvez utiliser le composant `DropDown` dans votre application :

```jsx
import React from 'react';
import DropDown from 'dark-light-dropdown'; 

function App(){
  const options = [
    { name: 'titre 1', abbreviation: 'O1' },
    { name: 'titre 2', abbreviation: 'O2' },
  ];

  const handleChange = (selected) => {
    console.log(selected); // récupere la valeur selectionnée, la valeur pourra être stockée avec useState par ex
  };

  return (
    <div>
      <DropDown
        label="Sélectionnez une option"
        name="uniqueName"
        id="uniqueId"
        options={options}
        onChange={handleChange}
        theme="dark" // ou "light"
      />
    </div>
  );
};

export default App;
```

## Props

- `label` (string): Texte du label pour le dropdown.
- `name` (string): Le nom du dropdown, utilisé lors de la soumission du formulaire.
- `id` (string): Identifiant unique pour le dropdown.
- `options` (array): Tableau des options pour le dropdown. Chaque option peut être une simple chaîne de caractères ou un objet avec les propriétés `name` et `abbreviation`.
- `onChange` (function): Fonction de rappel qui est appelée lorsque l'option sélectionnée change. Elle reçoit la nouvelle valeur comme argument.
- `theme` (string): Thème du dropdown. Accepte "light" ou "dark".

## Style

Le composant repose sur `dropdownstyle.css` pour le style. Assurez-vous d'importer la feuille de style dans votre application ou écrivez vos propres styles selon vos besoins.

### Liste des classes css

```css
.selector-container {
  /* Styles du conteneur */
}

.selector-value {

}

.selector-option {
}

.selector-light {

}

.selector-dark {

}
```

## Licence

Ce projet est sous licence ISC.

---
_Source: https://npm.io/package/dark-light-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._