@react-aria/switch

What is @react-aria/switch?

@react-aria/switch is a React library that provides accessible switch components. It is part of the React Aria collection, which aims to provide a set of hooks and components that help developers build accessible web applications. The switch component is used to represent a boolean state that can be toggled by the user.

What are @react-aria/switch's main functionalities?

Basic Switch

This code demonstrates a basic switch component using the @react-aria/switch package. The switch can be toggled between 'On' and 'Off' states.

import { useSwitch } from '@react-aria/switch';
import { useToggleState } from '@react-stately/toggle';
import { VisuallyHidden } from '@react-aria/visually-hidden';

function Switch(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { inputProps } = useSwitch(props, state, ref);

  return (
    <label>
      <VisuallyHidden>
        <input {...inputProps} ref={ref} />
      </VisuallyHidden>
      <span>{state.isSelected ? 'On' : 'Off'}</span>
    </label>
  );
}

export default function App() {
  return <Switch />;
}

Custom Styled Switch

This code demonstrates a custom styled switch component using the @react-aria/switch package. The switch is styled using CSS to look like a traditional toggle switch.

import { useSwitch } from '@react-aria/switch';
import { useToggleState } from '@react-stately/toggle';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import './Switch.css';

function Switch(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { inputProps } = useSwitch(props, state, ref);

  return (
    <label className="switch">
      <VisuallyHidden>
        <input {...inputProps} ref={ref} />
      </VisuallyHidden>
      <span className="slider"></span>
    </label>
  );
}

export default function App() {
  return <Switch />;
}

Other packages similar to @react-aria/switch

react-switch

react-switch is a lightweight React component for creating toggle switches. It provides a simple API and is easy to customize with CSS. Compared to @react-aria/switch, react-switch is more focused on providing a visually appealing switch component but may not have the same level of accessibility features.

rc-switch

rc-switch is a React component for creating switch controls. It is part of the rc-components collection and provides a highly customizable switch component. While it offers a range of customization options, it may require additional work to ensure full accessibility compared to @react-aria/switch.

react-toggle

react-toggle is a React component for creating highly customizable toggle switches. It provides a simple API and supports various customization options. However, it may not be as focused on accessibility as @react-aria/switch, making it a good choice for visually appealing switches with basic accessibility support.

README

@react-aria/switch

This package is part of react-spectrum. See the repo for more details.