All hooks / Storage and URL

useHash

159 B minified and brotliedSourceMarkdown✓ Works in all modern browsers

The URL hash, like location.hash ('#pricing', or '' when there is none), and a setter. Re-renders on hash links, back/forward, setHash, and router navigation that uses history.pushState (e.g. Next.js <Link href="#pricing">, in browsers with the Navigation API).

The server never sees the hash, so the server render and hydration use serverValue, then the real hash with no hydration mismatch.

Import

import { useHash } from '@vincent.ri/react-tils'
// or only this hook
import { useHash } from '@vincent.ri/react-tils/useHash'

Usage

const [hash, setHash] = useHash()
const tab = hash === '#billing' ? 'billing' : 'profile'
return <button onClick={() => setHash('#billing')}>Billing</button>

Live demo

When to use it

Tabs or an open panel that should survive reload and be linkable (/settings#billing), or highlighting the section a link pointed to.

When not to

The state must reach the server or appear in search results; use a query param (useSearchParam, or your router's). To style the target element, use CSS :target.

API

function useHash(serverValue?: string): [string, (hash: string) => void]

Returns [hash, setHash]. setHash('#billing') (or 'billing') adds a history entry and scrolls to a matching id, like clicking a hash link.