Hooks

useId

A lot of accessibility-related features rely heavily on element IDs. Manually providing such IDs is both cumbersome and error-prone. To aid with that, the hook autogenerates a random ID. Under the hood, when available, it's using React 18 built-in useId.

useMediaQuery

A hook to conditionally render component based on the viewport size. Following mobile-first approach, consider base return without conditional rendering to be the mobile one. Useful when wildly different components must be rendered depending on device screen size.

It determines, if there is a media query match for current viewport for each breakpoint from design tokens: isAboveSmall, isAboveMedium, isAboveLarge.

useAnimateTransition

Handlings animations of components that are conditionally appearing and disappearing, like dialogs, overlays, and dropdowns, could be quite tricky because normally there is no time for an exit animation to finish when the component unmounts.

This hook delays component unmount by the specified time, which allows complex CSS animations to finish. It doesn't animate styles by itself, therefore custom CSS keyframe animations must be provided explicitly.

useIsomorphicLayoutEffect

Occasionally there is a need to use useLayoutEffect React hook to ensure there is not a render flash for certain operations. This hook bypasses React warning when trying to use useLayoutEffect on the server.

useCallbackRef

Persists any function and prevents it from being invalidated between renders. Also keeps it up to date if it changes.

useMergeRefs

Merge two React refs into single one in a stable way.

useShowScrollHint

Occasionally for better user experience there is a need to hint that container is scrollable by either showing shadows or gradient masks. Depending on orientation (horizontal and vertical are available) and based on scroll position, show hints at the appropriate positions.

Container should have overflow: auto or overflow: scroll specified via CSS.

Hook is used by Table, Tabs, and Dialog.Body components.

Imports

You can import the following components or utilities from this module:

import {
  useAnimateTransition,
  useCallbackRef,
  useId,
  useIsomorphicLayoutEffect,
  useMediaQuery,
  useMergeRefs,
  useShowScrollHint,
} from '@datacamp/waffles/hooks';
import type { useAnimateTransitionProps } from '@datacamp/waffles/hooks';