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