xiao-hu / react-switch Goto Github PK

A draggable toggle-switch component for React.

• Draggable with the mouse or with a touch screen.
• Customizable - Easy to customize size, color and more.
• Accessible to visually impaired users and those who can't use a mouse.
• Small package size - 2 kB gzipped.
• It Just Works - Sensible default styling. Uses inline styles, so no need to import a separate css file.

Take a look at the demo

npm install react-switch

import React, { Component } from "react";
import Switch from "react-switch";

class SwitchExample extends Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(checked) {
    this.setState({ checked });
  }

  render() {
    return (
      <label htmlFor="normal-switch">
        <span>Switch with default style</span>
        <Switch
          onChange={this.handleChange}
          checked={this.state.checked}
          id="normal-switch"
        />
      </label>
    );
  }
}

The Switch component in the above example is nested inside a label tag. The label tag has an htmlFor-value that is identical to the id-value that is passed to the Switch ("normal-switch"). This is to make sure that users can click the label to toggle the switch, and that the label text is read out to people with reduced sight who use screen readers. If one would theoretically just put some text next to the switch, the screen reader will just read out "switch off" or something like that and the user will have no idea what it is for.

It's not strictly necessary to both nest the switch inside the label AND use the htmlFor prop to link the label and the switch. It should be enough to do just one. However, using both will "cover 100% of assistive devices" and free you from annoying eslint errors.

Alternatively, you can use the aria-labelledby or aria-label props to give the switch a label. You can see examples of this at the bottom of the demo page.

The following props have to be either 3-digit or 6-digit hex-colors: offColor, onColor, offHandleColor, and onHandleColor. This is because this library calculates intermediate color values based on the hex-color strings.

Examples of valid colors: '#abc', '#123456'

Examples of invalid colors: 'red', 'rgb(0,0,0)'

You're welcome to contribute to react-switch. Keep in mind that big changes have to be thoroughly tested on lots of different browsers and devices before they can be merged.

To set up the project:

1. Fork and clone the repository
2. $ npm install
3. $ npm run dev

The demo page will then be served on http://localhost:8000/ in watch mode, meaning you don't have refresh the page to see your changes.

Markus Englund

Timothy McLane

MIT