Hooks

The library exports a set of hooks used internally by components and available for consumer applications. Each hook is small, focused, SSR-safe, and tree-shakeable.

Available in v0.8

• useClickOutside — fire a callback when a click lands outside one or more refs
• useClipboard — copy text to the clipboard with timeout-driven feedback state
• useControlledState — manage the controlled / uncontrolled state pattern
• useDisclosure — { isOpen, open, close, toggle } for overlays and revealed surfaces
• useFocusTrap — trap keyboard focus within a container
• useHotkey — bind a single keyboard combo to a callback, with platform-aware Cmd/Ctrl mapping
• useKeyboard — read the live keyboard state via context
• useMergedRef — merge multiple refs into a single callback ref
• useResizeObserver — observe element size changes with SSR-safe cleanup
• useTheme — read the current theme at runtime — values, variant, and getToken / getVar helpers

Importing

All hooks are exported from the package root:

import {
  useClickOutside,
  useClipboard,
  useControlledState,
  useDisclosure,
  useFocusTrap,
  useHotkey,
  useMergedRef,
  useResizeObserver,
  useTheme,
} from 'entangle-ui';

Conventions

Every hook in this library follows the same conventions:

• SSR-safe: hooks that touch browser globals (ResizeObserver, document, navigator, etc.) check for their existence and silently no-op on the server.
• Stable callback identity: callbacks passed to hooks do not need to be memoized by the consumer. The hook wraps them in a ref so the underlying observer / effect does not re-subscribe on every render.
• enabled toggles, not unmounts: when a hook accepts an enabled flag, toggling it safely attaches / detaches its effect without unmounting the component.
• Dev-only warnings: misuse warnings (controlled / uncontrolled switches, etc.) only fire in development. Production builds are silent.