1.0.0 • Published 8 years ago

react-multi-switch v1.0.0

Weekly downloads
1
License
ISC
Repository
github
Last release
8 years ago

#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

  1. Include the stylesheet either react-multi-switch.min.css minified or react-multi-switch.css unminified.

    <link rel="stylesheet" href="/path-to-css/react-multi-switch.min.css" />
  2. 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} />