@base-ui-components/react/esm/toggle/useToggle.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import * as React from 'react';
import { mergeReactProps } from '../utils/mergeReactProps.js';
import { NOOP } from '../utils/noop.js';
import { useControlled } from '../utils/useControlled.js';
import { useEventCallback } from '../utils/useEventCallback.js';
import { useButton } from '../use-button/useButton.js';
export function useToggle(parameters) {
  const {
    buttonRef: externalRef,
    defaultPressed,
    disabled,
    onPressedChange: onPressedChangeProp = NOOP,
    pressed: pressedProp,
    setGroupValue,
    value
  } = parameters;
  const [pressed, setPressedState] = useControlled({
    controlled: pressedProp,
    default: defaultPressed,
    name: 'Toggle',
    state: 'pressed'
  });
  const onPressedChange = useEventCallback((nextPressed, event) => {
    setGroupValue(value, nextPressed, event);
    onPressedChangeProp(nextPressed, event);
  });
  const {
    getButtonProps,
    buttonRef
  } = useButton({
    disabled,
    buttonRef: externalRef,
    type: 'button'
  });
  const getRootProps = React.useCallback(externalProps => {
    return mergeReactProps(externalProps, {
      'aria-pressed': pressed,
      onClick(event) {
        const nextPressed = !pressed;
        setPressedState(nextPressed);
        onPressedChange(nextPressed, event.nativeEvent);
      },
      ref: buttonRef
    }, getButtonProps());
  }, [getButtonProps, buttonRef, onPressedChange, pressed, setPressedState]);
  return React.useMemo(() => ({
    getRootProps,
    disabled,
    pressed
  }), [getRootProps, disabled, pressed]);
}