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/aBureau · ✓BêtaNavigation

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

Type: auto

Web uniquement — React, depuis @krizaka/ui/router. Bêta : son API peut encore changer à une version mineure.

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

Pourquoi il est là. Used by Orazaka, Yomizaka.

Quand l’utiliser

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.

Quand ne pas l’utiliser

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.À la place : Tabs

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`adapter`requis	`RouteAdapter`	—	How your router reads the query string, navigates and tells about changes.

Accessibilité

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

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub