react-responsive-select

React Responsive Select

A React custom select control, that is both keyboard accessible like a native <select/> on desktop. And also tappable / draggable on touch devices.

Demo

It has some implementation examples

https://benbowes.github.io/react-responsive-select/demo/

Getting started

Install the dependency

npm install react-responsive-select --save-dev

Include the css file in your project. ./dist/ReactResponsiveSelect.css

And add ReactResponsiveSelect.js

Example usage:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ReactResponsiveSelect from 'react-responsive-select';

class Form extends Component {

  reportChange(newValue) {
    console.log(newValue);
  }

  render() {
    return (
      <form ref={r => this.form = r}>

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

      </form>
    );
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById('root')
);

A more detailed usage example can be found here: https://github.com/benbowes/react-responsive-select/blob/master/demo.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.

Note: The class names 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__select-container > .rrs__options-container {
  /* height: 0;
  visibility: hidden; */
  height: auto;
  visibility: visible;
}

Custom labeling

As of version 0.2.0 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

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 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
customLabelRenderer	Function	Allows you to format your own select label The customLabelRenderer function returns { name: select.name, value: option.value, text: option.text, markup: JSX Object }
multiselect (MultiSelect mode)	Boolean	Makes the selectbox handle multiple selections. Check the implementation example here: https://benbowes.github.io/react-responsive-select/demo/
selectedValues (MultiSelect mode)	Array of String values	Pre-select several options with this value - should match against existing option.value, or if omitted the first item will be selected. e.g. selectedValues={['mazda','ford']}

Interaction Tests

For information about how this select control works on desktop and mobile see the Interaction tests readme README_INTERACTION_TESTS.md