react-dragswitch

A simple draggable toggle switch

Demo

https://blobfysh.github.io/react-dragswitch/

Install

npm install --save react-dragswitch

or

yarn add react-dragswitch

Usage

import React, { Component } from 'react'

import { DragSwitch } from 'react-dragswitch'
import 'react-dragswitch/dist/index.css'

class Example extends React.Component {
  render() {
    return (
      <DragSwitch
        checked={this.state.checked}
        onChange={c => {
          this.setState({ checked: c })
        }}
      />
    )
  }
}

Functional Component

import React, { useState } from 'react'

import { DragSwitch } from 'react-dragswitch'
import 'react-dragswitch/dist/index.css'

const Example = () => {
  const [checked, setChecked] = useState(false)

  return (
    <DragSwitch checked={checked} onChange={(e) => {
      setChecked(e)
    }/>
  )
}

Props

<DragSwitch />, <ToggleSwitch />

Prop	Type	Default	Required	Description
checked	boolean		true	Whether switch should be checked
onChange	function		true	Callback for when the switch is checked, use this to set your state
className	string	null	false	Optional class for applying your own styles to the switch
onColor	string	'#66bb6a'	false	Background color when switch is checked
offColor	string	'#cccccc'	false	Background color when switch is not checked
handleColor	string	'#ffffff'	false	Color of the handle
focusShadow	string	'rgba(0,0,0,0.5) 0px 0px 2px 3px'	false	Box shadow of handle when switch is focused
disabled	boolean	false	false	Whether the switch is disabled

License

MIT © blobfysh