Multi use toggle component for react
npm install react-multi-toggle-extraReact-Multi-Toggle is a stylish & lightweight toggle component that extends the functionality of a checkbox or a radio button
This project was forked from https://github.com/danielarias123/react-multi-toggle and extended. This project will stay in sync with its updates by monitoring it with Backstroke.
!Backstroke logo{:height="40px"}
Can be installed as an npm package
```
npm install react-multi-toggle-extra
Example can be found here.
`shell`
npm i
npm start
Runs example on the webpack dev server on http://localhost:8080/ with Hot Module Reloading enabled.
Example using es6 syntax
`jsxreact
import React, { Component } from ;react-multi-toggle
import MultiToggle from ;
const groupOptions = [
{
displayName: 'Deny',
selectedDisplayName: 'Denied',
value: 2
},
{
displayName: 'Accept',
selectedDisplayName: 'Accepted',
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.
| Name | Type | Required | Description |
| :------------- | :-------------- | :------- | :-------------------------------------------------------------------------------- |
| options | Array
Toggle prop options is any array of objects with keys:
| Key | Type | Required | Description |
| :------------------ | :-------------------------- | :------- | :----------------------------------------------------------------------------------------------- |
| value | Any | Yes | Value passed by prop onSelectOption. |String
| displayName | or React Element | No | Label rendered on toggle for each option. If omitted, value will be used. |String
| selectedDisplayName | or React Element | No | Label rendered on toggle for a selected option. If omitted, displayName then value will be used. |String
| optionClass | | No | Optional class to apply to toggle when option is selected. |Boolean` | No | Viewable but not selectable. |
| isDisabled |
MIT