React-switcher-rc NPM

Swticher Component For React

npm npm

Demo

Switcher Component

Features

Draggable with the mouse or with a touch screen.
Customizable - Easy to customize size, color and more.

Very light weight
You can overide css properties

Installation

npm install react-switcher-rc

Usage

import React, {useState} from 'react';
import Switcher from 'react-switcher-rc';

function SwitcherExample() {
    const [switcherState, setSwitcherState] = useState(false);
    const onHandleChange = e => {
        setSwitcherState(e.target.checked);
    }
    return (
        <div>
            <Switcher 
                name="my-switcher"
                onChange={onHandleChange}
                checked={switcherState}
            />
        </div>
    )
}

Props	Type	Description
checked	boolean	Required. If true, the switch is set to checked. If false, it is not checked.
onChange	func	Required. Invoked when the user clicks or drags the switch. It passed event
disabled	boolean	Disabled the component
onColor	String	Can be hash or color `#000` or `red`

Development

You're welcome to contribute to react-switch. Keep in mind that big changes have to be thoroughly tested on lots of different browsers and devices before they can be merged.

To set up the project: