@volvo-cars/react-headless

@volvo-cars/react-headless

A collection of headless (style-free) React hooks that add accessibility and behaviour to native HTML elements. Use these hooks to build fully custom-styled components that follow Design System interaction patterns.

These hooks follow a specific pattern: they return props objects (e.g. dialogProps, tabProps) that are spread directly onto DOM elements. The hooks handle interaction, accessibility, and state — but never render any UI themselves. For general-purpose utility hooks that are not tied to a specific UI pattern or DOM element, see @volvo-cars/react-utils.

What's included

Dialog

• useDialog — Manages open/close state and focus trapping for a dialog element
• unstable_DialogController — Imperative controller for dialog state (experimental)

Popovers

• usePopover — Manages state and positioning for a popover anchored to a trigger element
• useAnchoredPopover — Lower-level hook for positioning a floating element relative to an anchor (wraps @floating-ui/react-dom)

Tabs

• useTabList — Manages keyboard navigation and selection state for a tab list
• useTab — Connects an individual tab to the tab list state
• useTabPanel — Connects a tab panel to the corresponding tab

Reels & carousels

• useReel — Enables horizontal scroll-snapping behaviour with navigation controls
• useSnapNavigation — Provides previous/next navigation for scroll-snap containers
• useSnapIndicators — Tracks the active snap position for rendering pagination dots

Accordion

• useAnimatedDetails — Adds CSS-animated open/close behaviour to a <details> element (used by @volvo-cars/react-accordion)

Pagination

• usePagination — Calculates the set of page numbers to display in a pagination control
• getPaginationPages — Utility function for generating pagination page arrays

Installation

yarn add @volvo-cars/react-headless