A draggable toggle group switch component for React.

Description

• Draggable with the mouse or with a touch screen.
• Accessible to visually impaired users and those who can't use a mouse.
• Customizable - Easy to customize size, color and more.
• Easy to integrate - It is easy to integrate and get values from selcted switches
• It Just Works - Sensible default styling. Uses inline styles, so no need to import a separate css file.

Installation

npm install toggle-switch-group

Usage

import * as React from 'react'
import {ToggleSwitchGroup} from 'toggle-switch-group'

class ToggleSwitchGroupExample extends React.Component<any, any> {
  getSwitches(){
    return [{
      checked: false,
      disabled: false,
      key: "allowCheckbox",
      label: "Allow Checkboxes"
    }, {
      checked: true,
      disabled: false,
      key: "allowNumber",
      label: "Allow Number"
    }, {
      checked: false,
      disabled: true,
      key: "disabled",
      label: "Disabled toggle"
    }]
  }
  
  render(){
    return(
      <div>
        <b>Toggle Switch Group Sample</b>
        <ToggleSwitchGroup groupTitle={'Form settings'} switches={this.getSwitches()} ref={'toggleGroup'}/>
      </div>
    )
  }
}

License

MIT