Skip to content

awaisayub149/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

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


Qubaish

License

MIT

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 75.0%
  • CSS 25.0%