@react-aria/switch

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 />;
}