react-dragswitch

A simple draggable toggle switch

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