@lukethegenius/next-ui-hooks

React/Next.js hooks: sync state to the URL query string, a hysteresis-based scroll-shrink hook for headers/nav bars, and an SSR-safe animated number counter.

Install

npm install @lukethegenius/next-ui-hooks react next framer-motion

Usage

import { useURLState, useNavShrink, AnimatedNumber } from '@lukethegenius/next-ui-hooks'

const [period, setPeriod] = useURLState('period', '30d') // syncs to ?period=

const compact = useNavShrink() // boolean, 2-state hysteresis (down 64px / up 16px)

<AnimatedNumber value={12500} prefix="€" /> // counts up client-side, respects prefers-reduced-motion

navShrinkReducer + initialNavShrinkState are exported separately as pure functions for unit testing without React/DOM.