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
• Either you can show Text or Icon

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
className	String	To override css properties
name	String	Attribute Name
ariaLabel	String	For accessibility (a11y) users
checkedIcon	String	Node
unCheckedIcon	String	Node

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

Qubaish

License

MIT