/ Select

A customisable React select / multi-select form control

A customisable React select / multi-select form control

React Responsive Select

A customisable, touchable, React single-select / multi-select form control.

Built with keyboard and screen reader accessibility in mind.

35433

react-responsive-select

Getting started

Install the dependency - https://www.npmjs.com/package/react-responsive-select

npm install react-responsive-select -D

Add ReactResponsiveSelect.js

And include the CSS file in your project via an import, or by copy/pasting the CSS from: ../node_modules/react-responsive-select/dist/ReactResponsiveSelect.css

Example usage:

import React from 'react';
import ReactResponsiveSelect from 'react-responsive-select';

const reportChange = (newValue) => console.log(newValue);

const Form = () => (
  <form ref={r => this.form = r}>
    <ReactResponsiveSelect
      name="make"
      options={[
        { text: 'Any', value: 'null' },
        { text: 'Oldsmobile', value: 'oldsmobile', markup: <span>Oldsmobile</span> },
        { text: 'Ford', value: 'ford', markup: <span>Ford</span> }
      ]}
      prefix="Make:"
      selectedValue="mazda"
      onSubmit={() => { this.form.submit(); }}
      onChange={reportChange}
      caretIcon={<span>+</span>}
    />
  </form>
);

A more detailed usage example can be found here:

 https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js

Altering styling

The CSS in ./dist/ReactResponsiveSelect.css is plain css. Include it in your project via an import or copy paste it's contents into your stylesheet.
Customisations can be done via overriding the styles or rewriting the classes.

The class names themselves are not configurable.

To aid in styling the hover/selected states in the options list, I would suggest overriding the class that hides the options temporarily e.g.

.rrs__button + .rrs__options {
  /* height: 0;
  visibility: hidden; */
  height: auto;
  visibility: visible;
}

Custom labeling

You can hook into the onChange function via the customLabelRenderer function prop. This allows you to render a custom label. See the API table for what the selectedOption object has in it.

<ReactResponsiveSelect
  name="make2"
  options={options}
  onSubmit={() => { this.form.submit(); }}
  // (Optional) format your own label text like this
  customLabelRenderer={selectedOption => `Selected make is ${selectedOption.text} :)`}
/>

API

Single Select

prop type description
name (required) String The name to send with the selected option value(s) on form submit
options (required) Array of objects

[{ text: "Fiat", value: "fiat", markup: <span>Fiat</span> }]

text: (Required) display value for the select and the default for the option label

value: (Required) value that is submitted

markup: (Optional) JSX markup used as the option label. Allows for the use of badges and icons...

Note: text is used as the option label when markup is not present

onSubmit Function Some function that submits your form
onChange Function

Listen for changes on selected option change

returns { altered: true||false, name: select.name, value: option.value, text: option.text, markup: JSX Object }

Note: altered signifies whether a select has been changed from it's original value.

caretIcon JSX Add a dropdown icon by using JSX markup
selectedValue String Pre-select an option with this value - should match an existing option.value, or if omitted the first item will be selected
prefix String Prefix for the select label
disabled Boolean Disables the select control
customLabelRenderer Function

Allows you to format your own select label

The customLabelRenderer function returns an option object e.g. { name: select.name, value: option.value, text: option.text, markup: JSX Object }

To use this feature you need to return some JSX; using values from the above object to create your own custom label.

See the example in the [singleselect demo](https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js#L144).
</p>
</td>

Multi Select

Same as Single Select API but with the following amendments

multiselect Boolean Makes the select control handle multiple selections. Check the implementation example here: https://benbowes.github.io/react-responsive-select/demo/
selectedValues Array of String values Pre-select several options with this value - should match against an existing option.value, or if omitted, the first item will be selected. e.g. selectedValues={['mazda','ford']}
customLabelRenderer Function

Allows you to format your own select label

The customLabelRenderer function returns an array option objects e.g. [{ name: select.name, value: option.value, text: option.text, markup: JSX Object }]

To use this feature you need to return some JSX; using values from the above object to create your own custom label.

See the example in the [multiselect demo](https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js#L589-L591).
</p>
</td>

GitHub