react-multi-toggle
React-Multi-Toggle is a stylish & lightweight toggle component that extends the functionality of a checkbox or a radio button
Installation
Can be installed as an npm package
npm install react-multi-toggle
Development
Example can be found here.
npm inpm start
Runs example on the webpack dev server on http://localhost:8080/
with Hot Module Reloading enabled.
Usage
Example using es6 syntax
import React Component from `react`;import MultiToggle from `react-multi-toggle`; const groupOptions = displayName: 'Couple' value: 2 displayName: 'Family' value: 4 ; { ; thisstate = groupSize: 2 ; } this; { const groupSize = thisstate; return <MultiToggle = = = ="Select Group Size" /> ; } moduleexports = Example;
Include the component's CSS through style-loader using require("../style.css")
or by adding styles to your existing stylesheets.
Props
Name | Type | Required | Description |
---|---|---|---|
options | Array<Object> |
Yes | Ordered array of options to render. Explained further below. |
selectedOption | Any |
Yes | Currently selected value. |
onSelectOption | Function |
No | Callback when option is selected. Receives the selected option value as parameter |
label | Any |
No | Optional label to add above toggle. |
className | string |
No | Optional style class to apply to toggle component. |
options format
Toggle prop options
is any array of objects with keys:
Key | Type | Required | Description |
---|---|---|---|
value | Any |
Yes | Value passed by prop onSelectOption . |
displayName | String or React Element |
No | Label rendered on toggle for each option. If omitted, value will be used. |
optionClass | String |
No | Optional class to apply to toggle when option is selected. |
License
MIT