react-simple-toggle

Simple React Toggle component

Demo

Live demo

Getting Started

Installation

npm install react-simple-toggle --save

Usage

Component

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>
		)
	}
}

Options

| name | type | default value | | -----|------|---------------| | className | string | 'toggle' | | defaultValue | boolean | false | | onChange | function | null | | checked | boolean | null |

Style

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