react-multi-switch

A multi-state switch UI component for ReactJS applications written in TypeScript.

Usage no npm install needed!

<script type="module">
  import reactMultiSwitch from 'https://cdn.skypack.dev/react-multi-switch';
</script>

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

  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} />