Package Exports
- react-multi-toggle
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-multi-toggle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 i
npm 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
},
];
class Example extends Component {
constructor(props) {
super(props);
this.state = {
groupSize: 2
};
}
onGroupSizeSelect = value => this.setState({ groupSize: value });
render = () => {
const { groupSize } = this.state;
return (
<MultiToggle
options={groupOptions}
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<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