react-switch

What is react-switch?

The react-switch npm package is a lightweight and customizable switch component for React applications. It allows developers to easily integrate toggle switches into their user interfaces, providing a simple and intuitive way for users to switch between two states.

What are react-switch's main functionalities?

Basic Switch

This code demonstrates how to implement a basic switch using the react-switch package. The switch toggles between two states, and the state is managed using React's useState hook.

import React, { useState } from 'react';
import Switch from 'react-switch';

function App() {
  const [checked, setChecked] = useState(false);

  const handleChange = nextChecked => {
    setChecked(nextChecked);
  };

  return (
    <div>
      <Switch onChange={handleChange} checked={checked} />
    </div>
  );
}

export default App;

Custom Styling

This code sample shows how to customize the appearance of the switch. You can change the colors of the switch when it is on or off, as well as the handle colors.

import React, { useState } from 'react';
import Switch from 'react-switch';

function App() {
  const [checked, setChecked] = useState(false);

  const handleChange = nextChecked => {
    setChecked(nextChecked);
  };

  return (
    <div>
      <Switch
        onChange={handleChange}
        checked={checked}
        offColor="#888"
        onColor="#0f0"
        offHandleColor="#fff"
        onHandleColor="#000"
      />
    </div>
  );
}

export default App;

Disabled Switch

This example demonstrates how to disable the switch. When the switch is disabled, it cannot be toggled by the user.

import React, { useState } from 'react';
import Switch from 'react-switch';

function App() {
  const [checked, setChecked] = useState(false);

  const handleChange = nextChecked => {
    setChecked(nextChecked);
  };

  return (
    <div>
      <Switch onChange={handleChange} checked={checked} disabled={true} />
    </div>
  );
}

export default App;

Other packages similar to react-switch

rc-switch

rc-switch is another React component for creating toggle switches. It offers similar functionality to react-switch but with a different API and styling options. It is also highly customizable and supports various themes.

react-toggle

react-toggle is a widely used package for creating toggle switches in React applications. It provides a simple API and allows for extensive customization. Compared to react-switch, react-toggle has a slightly different design and may be preferred for its simplicity and ease of use.

react-ios-switch

react-ios-switch is a React component that mimics the appearance of iOS-style toggle switches. It is ideal for applications that aim to provide a consistent iOS-like user experience. While it offers similar functionality to react-switch, its design is specifically tailored to match iOS aesthetics.

README

react-switch

A draggable, customizable and accessible toggle-switch component for React.

Demo

Take a look at the demo

Installation

npm install react-switch

Usage

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 (
      <div>
        <label htmlFor="example-switch">Look, an example switch!</label>
        <Switch
          onChange={this.handleChange}
          checked={this.state.checked}
          id="example-switch"
        />
      </div>
    );
  }
}

API

If you provide any of the following props, they 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'

(These will NOT work) Examples of invalid colors: 'red', 'rgb(0,0,0)'

Prop	Type	Default	Description
checked	bool	Required	If true, the switch is set to checked. If false, it is not checked.
onChange	func	Required	Invoked when the user clicks or drags the switch. It is passed one argument, checked, which is a boolean that describes the presumed future state of the checked prop.
disabled	bool	false	When disabled, the switch will no longer be interactive and its colors will be greyed out.
offColor	string	'#888'	The switch will take on this color when it is not checked. Only accepts hex-colors.
onColor	string	'#080'	The switch will take on this color when it is checked. Only accepts hex-colors.
offHandleColor	string	'#fff'	The handle of the switch will take on this color when it is not checked. Only accepts hex-colors.
onHandleColor	string	'#fff'	The handle of the switch will take on this color when it is checked. Only accepts hex-colors.
handleDiameter	number	null	The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch.
uncheckedIcon	element or bool	Default value	An icon that will be shown on the switch when it is not checked. Pass in false if you don't want any icon.
checkedIcon	element or bool	Default value	An icon that will be shown on the switch when it is checked. Pass in false if you don't want any icon.
boxShadow	string	null	The default box-shadow of the handle. You can read up on the box-shadow syntax on MDN.
activeBoxShadow	string	'0px 0px 2px 3px #33bbff'	The box-shadow of the handle when it is active or focused. Do not set this to null, since it is important for accessibility.
height	number	28	The height of the background of the switch, measured in pixels.
width	number	56	The width of the background of the switch, measured in pixels.
className	string	null	Set as the className of the outer shell of the switch. Useful for positioning the switch.
id	string	null	Set as an attribute to the embedded checkbox. This is useful for the associated label, which can point to the id in its htmlFor attribute.
aria-labelledby	string	null	Set as an attribute of the embedded checkbox. This should be the same as the id of a label. You should use this if you don't want your label to be a <label> element
aria-label	string	null	Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers.

License

MIT

Changelog

[2.0.0 - 2017-10-31]

Added

• Added some keywords

Changed

• Improved demo with best practices for labels.
• README clarifications