react-bootstrap-toggle

React-Bootstrap-Toggle


This is a react component of the http://www.bootstraptoggle.com/ project.

$3

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 (


.....
onClick={this.onToggle}
on={

ON

}
off={

OFF

}
size="xs"
offstyle="danger"
active={this.state.toggleActive}
/>

)
}

}


`

Install via NPM

`sh
npm install react-bootstrap-toggle --save
`

$3

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.
onstyle|string|"primary"|Style of the on toggle. Possible values are default, primary, success, info, warning, danger
onClassName|string|null| additional classname to put on the on button
offstyle|string|"default"|Style of the off toggle. Possible values are default, primary, success, info, warning, danger
offClassName|string|null| additional classname to put on the off button
handlestyle|string|"default"|Style of the handle. Possible values are default, 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

$3


A callback function that returns the state, the parent node, and the event
`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`.