react-multi-switch v1.0.0
#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
1. itemWidth
a number representing the individual state width.
2. states
an array of states each state is an object literal containing label
and key
3. 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.
4. selIndex
the currently selected index, the application should change this from the onChange function to reflect the index of the selected state.
5. 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} />
8 years ago