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:

npm install –-save react-popper-dropdown

or with YARN:

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:

import ReactPopperDropdown from "react-popper-dropdown"

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

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.