React-Dynamic-Select

React-Select with added functionality to display as radios/checkboxes depending on how many options are provided.

Useful when options are configurable and can be of varying size. It is generally recommended to show all options if there are 5 or fewer, and show a select otherwise.

Installation

Install react-dynamic-select:

yarn add react-dynamic-select

Then:

import DynamicSelect from 'react-dynamic-select'

Basic Usage

import React from 'react'
import DynamicSelect from 'react-dynamic-select'

export default ({ options, selectedValue, onChange }) =>
  <DynamicSelect options={options} value={selectedValue} onChange={onChange} />

Props

| Prop | Type | Usage | |-------------|----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | cutoff | number | The cutoff at which to display selects rather than radios/checkboxes. Defaults to 5. | | inputProps | Object | Props to pass to the inputs. | | items | Array of Objects | Items that can be selected in the form of objects with value and label props. | | labelProps | Object | Props to pass to the labels. | | multiple | bool | Whether or not this is a multi-select. Dictates whether radios or checkboxes are shown. Defaults to false. | | name | string | The name of the input. Needed to group radio buttons. | | selectProps | Object | Props to pass to the react-select Select, as seen here. Note that name, options, value, multi and onChange are passed automatically so do not need to be specified again. | | value | Array if multiple, otherwise any | The selected value (or values if in multiple select mode) | | onChange | func | Function to call when value is updated. In multiple select mode, the entire array of values will be passed to onChange. |

Styling

No styling is provided by default. You can either add your own or refer to React-Select's style installation guide here, but this will only style the selects themselves, not the radios/checkboxes.