react-switchery-component

react-switchery-component
=========================

React switch component.
Clone of Switchery rewritten for React.

Install

npm install react-switchery-component

Usage

``javascript import React from 'react'; import Switch from 'react-switchery-component'; import 'react-switchery-component/react-switchery-component.css';

class MyComponent extends React.Component { constructor(props) { super(props); this.state = {isChecked: false}; }

handleChange(e) { this.setState({isChecked: e.target.checked}); }

render() { return (


                
                    Basic example:
                                                checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />
                
                

                    Different color:
                                                color="#4c3fa2"
                            checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />
                
                

                    Different size:
                                                size="small"
                            checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />
                
                

                    Different speed:
                                                speed="2s"
                            checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />
                
                

                    Disabled:
                                                disabled={true}
                            checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />


        );
    }
}

Try it on CodePen.

Usage

javascript
import React from 'react';
import Switch from 'react-switchery-component';
import 'react-switchery-component/react-switchery-component.css';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isChecked: false};
    }

    handleChange(e) {
        this.setState({isChecked: e.target.checked});
    }

    render() {
        return (


                
                    Basic example:
                                                checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />
                
                

                    Different color:
                                                color="#4c3fa2"
                            checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />
                
                

                    Different size:
                                                size="small"
                            checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />
                
                

                    Different speed:
                                                speed="2s"
                            checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />
                
                

                    Disabled:
                                                disabled={true}
                            checked={this.state.isChecked}
                            onChange={(e) => this.handleChange(e)} />

);
}
}