# @leiops/dropdown

> A flexible dropdown component system for React Apps.

Latest version **1.0.0-alpha.2** (published 2018-11-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @leiops/dropdown
pnpm add @leiops/dropdown
yarn add @leiops/dropdown
bun add @leiops/dropdown
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.2 |
| Published | 2018-11-06 |
| First published | 2018-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gnordhielm |
| Keywords | react, dropdown, component |

## Links

- npm: https://www.npmjs.com/package/@leiops/dropdown
- npm.io page: https://npm.io/package/@leiops/dropdown

## Dependencies (3)

- [@leiops/helpers](https://npm.io/package/@leiops/helpers.md) ^1.3.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [babel-plugin-transform-react-remove-prop-types](https://npm.io/package/babel-plugin-transform-react-remove-prop-types.md) ^0.4.14

## 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.0.0-alpha.2 (latest) — 2018-11-06
- 1.0.0-alpha.1 — 2018-10-24
- 1.0.0-alpha.0 — 2018-10-24
- 0.1.0 — 2018-08-22

## README

# @leiops/dropdown

[![npm](https://img.shields.io/npm/dt/@leiops/dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@leiops/dropdown)
[![npm](https://img.shields.io/npm/v/@leiops/dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@leiops/dropdown)

A flexible dropdown component system for React Apps.

### How to use

This library provides several components which you can use as a basis for any kind of dropdown menu:

`Dropdown` - a wrapper element for everything.
`Dropdown.Trigger` - the element which tells the Dropdown container to show the dropdown \.
`Dropdown.Content` - a wrapper for all of the content hidden/shown at the discretion of the Dropdown container.

Keep in mind that `Trigger` and `Content` **must be direct children** of `Dropdown`. Here's a quick example:

```jsx
import Dropdown from '@leiops/dropdown'


const Menu = ({ onLogOut, onToggleMode }) => (
    <Dropdown>
        <Dropdown.Trigger>Profile</Dropdown.Trigger>
        <Dropdown.Content>
            <div onClick={onToggleMode}>Toggle Dark Mode</div>
            <div onClick={onLogOut}>Log Out</div>
        </Dropdown.Content>
    </Dropdown>
)
```

### Instance

Each instance of `Dropdown` has some methods developers might find useful.

Method | Description
----- | -----
**show** | Shows the dropdown.
**hide** | Hides the dropdown.

### Working

Right now, the dropdown watches child mutations and puts together a list of every element removed from within in order to deal with a situation where removing a child which was clicked on would close the dropdown. This may not be the desired behavior, perhaps only one removed item should be saved?

Portal and Dropdown contain almost idential code, I bet that can be dried up.

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