npm install react-simple-toggle --save
import React, { Component } from 'react';
import { Toggle } from 'react-simple-toggle';
class MyComponent extends Component {
handleChange(checked){
console.log(checked);
}
render(){
return (
<div>
<Toggle
defaultValue={true}
onChange={this.handleChange}
/>
</div>
)
}
}| name | type | default value |
|---|---|---|
| className | string | 'toggle' |
| defaultValue | boolean | false |
| onChange | function | null |
| checked | boolean | null |
The styling is completely separated from the component in order to make easy to integrate with the styling of your app. Create your css taking into account this tree:
|-- toggle toggle--checked
|-- toggle__left
|-- toggle__center
|-- toggle__right
Notes:
- "toggle" can be replaced by className prop
- toggle--checked is only present when is toggled
However, you can use one of the stylesheets provided in style folder
require('node_modules/react-simple-toggle/style/android.css')
more styles coming soon