package.dist.components.toggle.use-toggle.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of react Show documentation

A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.

The newest version!

'use client';
import { dataAttr } from '@zag-js/dom-query';
import { useControllableState } from '../../utils/use-controllable-state.js';
import { parts } from './toggle.anatomy.js';

function useToggle(props) {
  const { defaultPressed, pressed, onPressedChange, disabled } = props;
  const [pressedState, setPressedState] = useControllableState({
    defaultValue: !!defaultPressed,
    value: pressed,
    onChange: onPressedChange
  });
  return {
    pressed: pressedState,
    disabled: !!disabled,
    setPressed: setPressedState,
    getRootProps() {
      return {
        ...parts.root.attrs,
        type: "button",
        disabled,
        "aria-pressed": pressedState,
        "data-state": pressedState ? "on" : "off",
        "data-pressed": dataAttr(pressedState),
        "data-disabled": dataAttr(disabled),
        onClick(event) {
          if (event.defaultPrevented) return;
          if (disabled) return;
          setPressedState(!pressedState);
        }
      };
    },
    getIndicatorProps() {
      return {
        ...parts.indicator.attrs,
        "data-disabled": dataAttr(disabled),
        "data-pressed": dataAttr(pressedState),
        "data-state": pressedState ? "on" : "off"
      };
    }
  };
}

export { useToggle };