Swticher Component For React

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:

1. Fork and clone the repository
2. $ npm install
3. $ npm run start

To Do

• Convert it to styled components
• Test Cases
• Prelint configurations

Contributors

License

MIT