1.0.1 • Published 3 years ago

react-dragswitch v1.0.1

Weekly downloads
212
License
MIT
Repository
github
Last release
3 years ago

react-dragswitch

A simple draggable toggle switch

NPM JavaScript Style Guide

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

PropTypeDefaultRequiredDescription
checkedbooleantrueWhether switch should be checked
onChangefunctiontrueCallback for when the switch is checked, use this to set your state
classNamestringnullfalseOptional class for applying your own styles to the switch
onColorstring'#66bb6a'falseBackground color when switch is checked
offColorstring'#cccccc'falseBackground color when switch is not checked
handleColorstring'#ffffff'falseColor of the handle
focusShadowstring'rgba(0,0,0,0.5) 0px 0px 2px 3px'falseBox shadow of handle when switch is focused
disabledbooleanfalsefalseWhether the switch is disabled

License

MIT © blobfysh