Route state

The URL is the state: useRouteState keeps a selection (a tab, a type, a filter) in a search parameter, and Tabs, Chip.Group and ChoiceGrid bind to it with routeKey.

Web · ✓Mobile · n/aDesktop · ✓BetaNavigation

import { useRouteState, RouteStateProvider, readRouteValue, writeRouteValue } from "@krizaka/ui/router";

Type: auto

Web only — React, from @krizaka/ui/router. Beta: its API may still change in a minor version.

Mobile · n/a. A native app routes with its navigator's params, not with a web address.

Why it is here. Used by Orazaka, Yomizaka.

When to use

For any choice the user would want to share, reload or come back to with the back button: a tab, a document type, a filter, a view.
Pass routeKey to Tabs, Chip.Group (single) or ChoiceGrid: they read and write the parameter, no useState.

When not to use

For a state that must not outlive the screen: a hover card's tab, an open popover — keep it local and say why (// @ephemeral: <reason>).
To move between pages that have their own path.Use instead: Tabs

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { useRouteState, RouteStateProvider, readRouteValue, writeRouteValue } from "@krizaka/ui/router";

Examples

A choice in the URL

useRouteState("type", { values, default }) typed from a const list, and a Chip.Group bound with routeKey.

Type: auto

Props

Gives useRouteState your router: <RouteStateProvider adapter={nextAdapter}> once, in the root layout.

Prop	Type	Default	Description
`adapter`required	`RouteAdapter`	—	How your router reads the query string, navigates and tells about changes.

Accessibility

No effect of its own: the bound component keeps its roles and keys; the address is announced by the browser on a push.

Best practices

Type the values with an as const list: const TYPES = ["auto", "lease"] as const; an unknown value in the address reads as the default.
The default is never written to the address, so the clean URL is the default view.
history: "replace" for a filter toggled in passing; the default push for a section the user will go back from.
In Next.js give your router once: <RouteStateProvider adapter={…}> in the root layout (search, navigate, subscribe).
The lint rule krizaka/route-state-selection (@krizaka/config) refuses a page selection driven by local state.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub