# react-popper-dropdown

> React Popper Dropdown

Latest version **0.2.2** (published 2019-01-16) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2019-01-16 |
| First published | 2018-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 513.7 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Michele Lugano |
| Maintainers | energydrink9, nic-s |

## Links

- npm: https://www.npmjs.com/package/react-popper-dropdown
- Repository: https://github.com/energydrink9/react-popper-dropdown
- Homepage: https://github.com/energydrink9/react-popper-dropdown#readme
- Issues: https://github.com/energydrink9/react-popper-dropdown/issues
- npm.io page: https://npm.io/package/react-popper-dropdown

## Dependencies (4)

- [uuid](https://npm.io/package/uuid.md) ^3.3.2
- [immutable](https://npm.io/package/immutable.md) ~3.8.2
- [react-popper](https://npm.io/package/react-popper.md) ^1.0.0
- [styled-components](https://npm.io/package/styled-components.md) ^4.0.3

## Recent versions

- 0.2.2 (latest) — 2019-01-16
- 0.2.1 — 2019-01-16
- 0.2.0 — 2018-12-21
- 0.1.6 — 2018-12-20
- 0.1.5 — 2018-11-26
- 0.1.4 — 2018-11-21
- 0.1.3 — 2018-11-19
- 0.1.2 — 2018-11-05
- 0.1.1 — 2018-10-31

## README

# React Popper Dropdown

[![npm version](https://badge.fury.io/js/react-popper-dropdown.svg)](https://badge.fury.io/js/react-popper-dropdown)
![NPM license](https://img.shields.io/github/license/energydrink9/react-popper-dropdown.svg)
[![npm](https://img.shields.io/npm/dm/react-popper-dropdown.svg)](https://www.npmjs.com/package/react-popper-dropdown)

This is a library made with React and React-Popper for creating a simple customizable dropdown.

React Popper Dropdown is written in functional programming style with ES2016 and Flow.


# Installation

You can install the library with NPM:

```bash
npm install –-save react-popper-dropdown
```

or with YARN:

```bash
yarn add react-popper-dropdown
```


# Usage

To use React Popper Dropdown, you have to import the library and its base types you intend to use, for example:

```javascript
import ReactPopperDropdown from "react-popper-dropdown"
```

then you can use it inside your component. For example:

```javascript
import React from 'react'
import ReactPopperDropdown from "react-popper-dropdown"

let choices = [
  {id:0, value:"choice 1"},
  {id:1, value:"choice 2"},
  {id:2, value:"choice 3"},
]

let value = choices[0]

class MyDropdown extends React.Component {

  render = () => <ReactPopperDropdown choices={choices} value={value} />

}
```


# Component Props

The ReactPopperDropdown component accepts the following props:

|Prop|Default|Description|
|---|---|---|
|choices| | Specifies the possibles value of dropdown|
|value| | Specifies the value of dropdown, could be an element or a list of element in case of a multi select|
|idGetter|(element) => element.id | Specifies how to get the id of choice |
|labelGetter|(element) => element.label | Specifies how to get the label of choice |
|renderer|(value) => value| Specifies how to render the column value |
|enabled| true | Allows the user to change or the value |
|onValueChange| | Allows to specify an event handler for the value change event|
|enableReset| true | Allows to user to reset the value|
|filterable| true |Show the filter textbox that Allows to user to filter the choices|
|popperContainer| document.body | When the popper element is attached|
|className| | Css classes to apply to the component|
|autoWidth|false| Enable the automatically adjusts the width of the popup element|
|maxHeight|auto| Defines the max height of the dropdown popup|
|multi|false|Enables multiple selection|


# Conclusion

Pull requests are welcome, enjoy your react popper dorpdown!


## Contributors

This project exists thanks to all the people who contribute. 
<a href="https://github.com/energydrink9/react-popper-dropdown/contributors"><img src="https://opencollective.com/react-popper-dropdown/contributors.svg?width=890&button=false" /></a>

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