Layout

Hooks & cn

The kit's small hooks (useHover, useMediaQuery, breakpoints, useCallbackRef, useFirstRender) and the cn class helper.

When to use

The kit's small hooks and the cn class helper, for building your own components in the same style.

When not to

useIs* read the kit's breakpoint variables through useSubscribeBreakpoints — call that once near the root, or use useMediaQuery directly.

Import

import { cn, useHover, useMediaQuery, useCallbackRef, useFirstRender } from "@countryclub/ui-react";

useHover and useMediaQuery

Hover me · below md

Accessibility

Hooks have no UI. useMediaQuery("(prefers-reduced-motion: reduce)") is the way to honour reduced motion in custom animation.

Also exported

Parts, aliases, class helpers and hooks that take no props of their own beyond the native ones: cn, useHover, useMediaQuery, useCallbackRef, useFirstRender, useIsTabActive, useIs2xl, useIsLg, useIsMd, useIsSm, useIsXl, useSubscribeBreakpoints.