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

Draggable toggle-switch component for react