README
react-multi-switch
A configurable multi-switch UI component for ReactJS application written in TypeScript.
Installation
with JSPM
mydir$ jspm install npm:react-multi-switch --save
with NPM
mydir$ npm install react-multi-switch --save-
Properties
itemWidth
a number representing the individual state width.states
an array of states each state is an object literal containinglabel
andkey
onChange
a function to be called when the state changes, it is passed the index of the state that has been clicked, and the state's key.selIndex
the currently selected index, the application should change this [from the onChange function] to reflect the index of the selected state.className
an optional parameter to set another class on the MultiSwitch root element.
Usage [ES6 and JSPM]
Include the stylesheet either
react-multi-switch.min.css
[minified] orreact-multi-switch.css
[unminified].<link rel="stylesheet" href="/path-to-css/react-multi-switch.min.css" />
Using JSPM
import {MultiSwitch} from 'react-multi-switch'; const states = [{ label:'Item 1', key:'item1' },{ label:'Item 2', key:'item2' }]; <MultiSwitch itemWidth={100} onChange={(idx,key)=>{}} selIndex={0} states={states} />
Usage with [CommonJS modules]
var MultiSwitch = require('react-multi-switch').MultiSwitch;
const states = [{
label:'Item 1',
key:'item1'
},{
label:'Item 2',
key:'item2'
}];
<MultiSwitch itemWidth={100} onChange={(idx,key)=>{}} selIndex={0} states={states} />