react-dragswitch

A simple draggable toggle switch.

Install

npm install --save react-dragswitch

or

yarn add react-dragswitch
Bash

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 })
        }}
      />
    )
  }
}
React JSX

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

React JSX

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

GitHub

A draggable toggle switch for reactRead More

Latest commit to the master branch on 4-22-2023
Download as zip