react-bootstrap-toggle v2.3.2

React-Bootstrap-Toggle

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

Usage

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.

<link rel="stylesheet" href="node_modules/lib/bootstrap2-toggle.css">

Or you could import it to your SASS or LESS build.

@import "node_modules/lib/bootstrap2-toggle.css";

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 (
      <form>
        <SomeInput something={someProp} />
        .....
        <Toggle
          onClick={this.onToggle}
          on={<h2>ON</h2>}
          off={<h2>OFF</h2>}
          size="xs"
          offstyle="danger"
          active={this.state.toggleActive}
        />
      </form>
    )
  }

}

Install via NPM

npm install react-bootstrap-toggle --save

Props

onClick

A callback function that returns the state, the parent node, and the event

onClick(state, node, evt);

Using Bootstrap2 class names

If you want to use bootstrap2 class names you can import the component like this

import { Bootstrap2Toggle } from 'react-bootstrap-toggle';

Now the component will use large instead of lg and etc..

Bootstrap2Toggle Props