https://github.com/suhdev/react-multi-switch
A switch ui component for ReactJS applications written in TypeScript.
https://github.com/suhdev/react-multi-switch
Last synced: about 1 year ago
JSON representation
A switch ui component for ReactJS applications written in TypeScript.
- Host: GitHub
- URL: https://github.com/suhdev/react-multi-switch
- Owner: suhdev
- Created: 2016-06-18T11:29:44.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-06-18T16:09:57.000Z (about 10 years ago)
- Last Synced: 2025-06-10T21:50:10.646Z (about 1 year ago)
- Language: JavaScript
- Size: 129 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#react-multi-switch
A configurable multi-switch UI component for ReactJS application written in TypeScript.
## Installation
### with JSPM
```bash
mydir$ jspm install npm:react-multi-switch --save
```
### with NPM
```bash
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].
```html
```
2. Using JSPM
```javascript
import {MultiSwitch} from 'react-multi-switch';
const states = [{
label:'Item 1',
key:'item1'
},{
label:'Item 2',
key:'item2'
}];
{}} selIndex={0} states={states} />
```
##Usage with [CommonJS modules]
```javascript
var MultiSwitch = require('react-multi-switch').MultiSwitch;
const states = [{
label:'Item 1',
key:'item1'
},{
label:'Item 2',
key:'item2'
}];
{}} selIndex={0} states={states} />
```