🪝Hooks

Valence provides a collection of React hooks that make it easier to build interactive and responsive components. These hooks handle common patterns like state management, responsive behavior, and visual styling.

Available hooks

State management

• UseDisclosure - Boolean state with open/close/toggle methods

• UseControlledList - Array state with add/remove methods

Responsiveness

• UseBreakpoint - Current device breakpoint detection

• UseResponsiveProps - Resolve responsive prop values

• UseWindowSize - Window dimensions

• UseElementSize - Element dimensions

Styling

• UseColors - Access Valence color palette

• UseColorScheme - Light/dark mode detection

• UseFloating - CSS for floating/positioned elements

User interaction

• UseDetectKeyDown - Keyboard event detection

• UseTooltip - Tooltip positioning

Utilities

• UseLockScroll - Lock/unlock body scrolling

• UseWindowTitle - Set browser tab title