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-dropdownor with YARN:
yarn add react-popper-dropdownUsage
To use React Popper Dropdown, you have to import the library and its base types you intend to use, for example:
then you can use it inside your component. For example:
let choices = id:0 value:"choice 1" id:1 value:"choice 2" id:2 value:"choice 3" let value = choices0 Component <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.
