A React version of the bootstrap-toggle without the JQuery dependency
npm install react-bootstrap-toggleThis is a react component of the http://www.bootstraptoggle.com/ project.
You need to include the bootstrap css file and also the bootstrap2-toggle css file in your app.
If you are using the npm version then you can include it from the module like this.
``html`
Or you could import it to your SASS or LESS build.
`css`
@import "node_modules/lib/bootstrap2-toggle.css";
`js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Toggle from 'react-bootstrap-toggle';
class Form extends Component {
constructor() {
super();
this.state = { toggleActive: false };
this.onToggle = this.onToggle.bind(this);
}
onToggle() {
this.setState({ toggleActive: !this.state.toggleActive });
}
render() {
return (
}
`
`sh`
npm install react-bootstrap-toggle --save
Name|Type|Default|Description|
---|---|---|---
active|boolean|true| Sets the initial state of the toggle
on|string/html|"On"|Text of the on toggle
off|string/html|"Off"|Text of the off toggle
size|string|null|Size of the toggle. Possible values are lg, sm, xs.default
onstyle|string|"primary"|Style of the on toggle. Possible values are , primary, success, info, warning, dangerdefault
onClassName|string|null| additional classname to put on the on button
offstyle|string|"default"|Style of the off toggle. Possible values are , primary, success, info, warning, dangerdefault
offClassName|string|null| additional classname to put on the off button
handlestyle|string|"default"|Style of the handle. Possible values are , primary, success, info, warning, danger
handleClassName|string|null| additional classname to put on the handle button
width|integer|null|Sets the width of the toggle. if set to null, width will be responsive.
height|integer|null|Sets the height of the toggle. if set to null, height will be responsive.
disabled|bool|false|Render the toggle as disabled
style|object|null|If you want to add additional style to the root div
recalculateOnResize|bool|false| If the toggle should recalculate it's dimensions when visibility or dimensions change
js
onClick(state, node, evt);
`
$3
If you want to use bootstrap2 class names you can import the component like this
`js
import { Bootstrap2Toggle } from 'react-bootstrap-toggle';
`
Now the component will use large instead of lg and etc..$3
Name|Type|Default|Description|
---|---|---|---
size|string|null|Size of the toggle. Possible values are large, small, tiny`.