@qubaish/react-switcher-component 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
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	Either you can pass text or icon(svg)
unCheckedIcon	String	Node	Either you can pass text or icon(svg)

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:

Fork and clone the repository
$ npm install
$ npm run start

To Do

Convert it to styled components
Test Cases
Prelint configurations

Contributors

License

MIT

react

@babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/runtime classnames prop-types react react-dom

5 years ago

5 years ago

5 years ago

5 years ago