# dropdown-react-natacha

> Simple customizable modal component for React apps.

Latest version **0.1.13** (published 2021-10-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install dropdown-react-natacha
pnpm add dropdown-react-natacha
yarn add dropdown-react-natacha
bun add dropdown-react-natacha
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.13 |
| Published | 2021-10-14 |
| First published | 2021-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 730.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | natachalng11 |

## Links

- npm: https://www.npmjs.com/package/dropdown-react-natacha
- npm.io page: https://npm.io/package/dropdown-react-natacha

## Dependencies (4)

- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [react-fontawesome](https://npm.io/package/react-fontawesome.md) ^1.7.1
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.15
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.15.4

## Recent versions

- 0.1.13 (latest) — 2021-10-14
- 0.1.12 — 2021-10-14
- 0.1.11 — 2021-10-14
- 0.1.10 — 2021-10-09
- 0.1.9 — 2021-10-09
- 0.1.8 — 2021-10-09
- 0.1.7 — 2021-10-09
- 0.1.6 — 2021-10-09
- 0.1.5 — 2021-10-09
- 0.1.4 — 2021-10-08
- 0.1.3 — 2021-10-08
- 0.1.2 — 2021-10-08
- 0.1.1 — 2021-10-08
- 0.1.0 — 2021-10-08

## README

# [dropdown-react](https://www.npmjs.com/package/dropdown-react-natacha)

Simple customizable modal component for React apps.

## Installation

To install using npm: [npm install dropdown-react-natacha]

## API Documentation

This is a simple example of dropdown being used in a React app.

You have to set a state for the dropdown in the parent component.

Create a function that will change the state and pass this function as handleClick props for the dropdown component.

Props that could be passed to dopdown component:

•	selectValue(required): the value that you want to display in the select

•	handleSelectChange(required): function that handle the change of the select value

•	selectLabel(optionnal): the text that you want to display as the title of the dropdown

•	selectList(required): the list that will appear in your dropdown

•	selectName(required): name of your select

•	isOpen(required): function that will check if your dropdown wrapper is opened or closed (return a boolean)

•	handleOpen(required): function that will handle your isOpen state change 

Example:
````
    const [isOverlayActive, setIsOverlayActive] = useState(false);
    const [openedElts, setOpenElts] = useState(initialState);
    
    const handleElementsOpening = (elt) => {
        if (openedElts[elt]) {
            setIsOverlayActive(false);
        }
        else setIsOverlayActive(true);
        setOpenElts({
            ...openedElts,
            [elt]: !openedElts[elt],
        });
    };
````
    
If you want to close the dropdown on clicking anywhere else on your window, you can add this kind of function to your project:
 ````
 window.onclick = function(event) {
        if (!event.target.matches('.dropdown-btn')) {
            setOpenElts(initialState);
            setIsOverlayActive(false);
        }}}
````

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