# dropdown-component-library-afarkhsi

> A React dropdown menu component

Latest version **1.1.0** (published 2024-01-30) · 0 weekly downloads

## Install

```sh
npm install dropdown-component-library-afarkhsi
pnpm add dropdown-component-library-afarkhsi
yarn add dropdown-component-library-afarkhsi
bun add dropdown-component-library-afarkhsi
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-01-30 |
| First published | 2024-01-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | afarkhsi |
| Maintainers | afarkhsi |
| Keywords | Dropdown menu, Dropdown, Select menu, React, Component |

## Links

- npm: https://www.npmjs.com/package/dropdown-component-library-afarkhsi
- Repository: https://github.com/afarkhsi/dropdown_menu_plugin
- Homepage: https://github.com/afarkhsi/dropdown_menu_plugin#readme
- Issues: https://github.com/afarkhsi/dropdown_menu_plugin/issues
- npm.io page: https://npm.io/package/dropdown-component-library-afarkhsi

## Dependencies (1)

- [react-event-hook](https://npm.io/package/react-event-hook.md) ^3.1.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-01-30
- 1.0.0 — 2024-01-25
- 0.2.0 — 2024-01-25

## README

# Dropdown-component-library

Library of React components created using `create-react-app`.

## Prerequisites :

- [Node.js](https://nodejs.org/en/)
- `Npm` or `Yarn`
- `Visual studio` code or similare

## Description:

A simple React dropdown menu component

## Installation:

### Package installation

Run the followings commands with npm or yarn:

    $ npm install dropdown-component-library-afarkhsi
    $ yarn add dropdown-component-library-afarkhsi

### Import the dropdown menu

```jsx
import { DropdownMenu } from 'dropdown-component-library-afarkhsi';
```

### Simple example of using:

To define the possible options on your dropdown menu you can pass an array with `value` and `label` keys.

```jsx
import React from 'react';
//import the dropdown menu component
import { DropdownMenu } from 'dropdown-component-library-afarkhsi';

function DropDown() {
  const optionsExample = [
    { label: 'Paris', value: 'paris' },
    { label: 'Lille', value: 'lille' },
    { label: 'Lyon', value: 'lyon' },
    { label: 'Bordeaux', value: 'bordeaux' },
    { label: 'Marseille', value: 'marseille' },
    { label: 'Reims', value: 'reims' },
  ];

  return <DropdownMenu options={optionsExample} />;
}

export default DropDown;
```

### Props

|      Prop      |   Type   |               Description                |
| :------------: | :------: | :--------------------------------------: |
|   `options`    | `Array`  |       Define the dropdown options        |
|      `id`      | `string` |         Define the component id          |
|    `label`     | `string` |        Define the component label        |
| `placeholder`  | `string` | Define the placeholder of the component  |
| `defaultValue` | `string` | Define the defaultValue of the component |
|     `name`     | `string` |     Define the name of the component     |

### EventListener option

If you need to retrieve the data displayed on the click menu you must add these lines of code and set your state in your function before calling the 'dropdownEvent' listener with your function as a second parameter.

Example :

```jsx
const [data, setData] = useState();
// Enclosing application
function myFunction(event: any) {
  // retrieve the object from the event
  const objet = event.detail;
  // Manipulate the object in the enclosing application
  setData(objet);
}

// Adding the event listener dropdownEvent
window.addEventListener('dropdownEvent', myFunction);
```

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