Quick Start
Get productive with kvant in seconds.
Core principle
kvant turns key-value interfaces into React state. Bind a key, pass a
schema from kvantjs/schema, and read/write it like useState. The
interface (here, the URL) stays the single source of truth:
import { } from 'kvantjs/react-router'
import * as from 'kvantjs/schema'
function () {
const [, ] = ('q', .().(''))
return (
<
={}
={ => (..)}
/>
)
}?q=hello in the URL means query is 'hello'. Calling setQuery writes back to the URL.
Multiple keys
Bind a whole key map in one call. Updates batch into a single write:
const [, ] = ({
: .().(''),
: .().(0),
: .(['asc', 'desc']).('asc'),
: .(.()).([]), // repeated params: ?tags=a&tags=b
})
( => ({ ..., : . + 1 }))Options
Pass options as the last argument:
const [, ] = ('q', .().(''), {
: 'push', // add browser history entries
})Global default options
Set options once for a component subtree using the options provider:
import { } from 'kvantjs/react-router'
< ={{ : 'push' }}>
{}
</>Nested providers merge with parent options by default (extend: true).
Pass extend={false} to replace instead of merge:
<
={{ : 'push' }}
={false}
>
{}
</>Every interface
The same pattern works for all supported key-value interfaces:
import { } from 'kvantjs/react-router'
import { , , } from 'kvantjs/react'
import * as from 'kvantjs/schema'
// URL search params: shareable, bookmarkable
const [, ] = ('q', .().(''))
// localStorage: persists across reloads, syncs across tabs
const [, ] = ('theme', .(['light', 'dark']).('light'))
// sessionStorage: scoped to the current tab
const [, ] = ('draft', .().(''))
// Cookies: readable by the server, respect Set-Cookie attributes
// (requires additional setup for SSR, see the full guide)
const [, ] = (
'consent',
.().(false),
{ : 60 * 60 * 24 * 365 },
)Full guides: Search Params · Local Storage · Cookies