Multi use toggle component for react
npm install react-multi-toggleReact-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
`shell`
npm i
npm starthttp://localhost:8080/
Runs example on the webpack dev server on with Hot Module Reloading enabled.
Usage
-----
Example using es6 syntax
`jsxreact
import React, { Component } from ;react-multi-toggle
import MultiToggle from ;
const groupOptions = [
{
displayName: 'Couple',
value: 2
},
{
displayName: 'Family',
value: 4
},
];
class Example extends Component {
constructor(props) {
super(props);
this.state = {
groupSize: 2
};
}
onGroupSizeSelect = value => this.setState({ groupSize: value });
render = () => {
const { groupSize } = this.state;
return (
selectedOption={groupSize}
onSelectOption={this.onGroupSizeSelect}
label="Select Group Size"
/>
);
}
}
module.exports = 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
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. |MIT