react-dropdown-select v4.11.2

react-dropdown-select

Customisable dropdown select for react

Features

• configurable via props
• total custom components overrides for all internals via render prop callbacks (with access to internal props, state and methods)
• stylable via css (or custom components)
• portal support for rendering dropdown outside local DOM tree. e.g. in document.body
• auto position
• small bundle size

Installation

npm install --save react-dropdown-select

Web site

Web site, docs and demo

Motivation

react-select is very nice, but sometimes project requirements are beyond it's abilities

Usage

import:

import Select from "react-dropdown-select";

and use as:

const options = [
  {
    value: 1,
    label: 'Leanne Graham'
  },
  {
    value: 2,
    label: 'Ervin Howell'
  }
];

<Select options={options} onChange={(values) => this.setValues(values)} />;

If your options don't have value and label fields, include labelField and valueField in the props:

const options = [
  {
    id: 1,
    name: 'Leanne Graham'
  },
  {
    id: 2,
    name: 'Ervin Howell'
  }
];

<Select
  options={options}
  labelField="name"
  valueField="id"
  onChange={(values) => this.setValues(values)}
/>;

options and onChange are the minimum required props

Help and Contributions

How to help/contribute

• fix issues, pull request are very welcome
• write, improve docs
• write tests (we use jest)
• suggest features and improvements

Demo

API

Component props

Callback props

by using renderer props to override components some of the functionality will have to be handled manually with a help of internal props, states and methods exposed

License

MIT