Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA dialog whose open state is the URL fragment: a link to #help opens it, Back closes it, loading the page with the fragment shows it and focus returns to the opener.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for dialogs people want to link to or reopen after reload: help, shortcuts, changelog, a plan comparison.
Do not use it for confirmations or forms with unsaved work: a stray Back should not discard them. Do not combine with other code that owns the hash.
It builds on dialog, which the CLI installs for you.
import { DialogRouteHash } from "@/components/dialog-route-hash"<a href="#shortcuts">Keyboard shortcuts</a>
<DialogRouteHash hash="shortcuts" title="Keyboard shortcuts">
<ShortcutList />
</DialogRouteHash>| Prop | Type | Default | Description |
|---|---|---|---|
hash | string | dialog | Fragment that opens it, without #. |
title, description | string | - | Dialog text. |
returnFocusTo | RefObject<HTMLElement> | opener | Element to focus on close. |
| Prop | Type | Default | Description |
|---|---|---|---|
(hash?: string) | void | - | Sets the fragment, which opens the dialog. |
location.hash and is kept in step through hashchange and popstate; other fragments are ignored.history.back() when the fragment is set, so Back and Escape behave the same and the history stays clean.returnFocusTo).| Key | Action |
|---|---|
| Escape | closes by going back in history |
| Tab | stays inside the dialog |
The pattern ships a Testing Library test (dialog-route-hash.test.tsx) that covers closed by default, open on load, opening by fragment, closing on popstate and Escape going back.