Skip to content

Qubaish/react-switcher-component

Repository files navigation

Swticher Component For React


npm npm Build Status Netlify Status gzip size

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