Type-safe search params state manager for React
Basic usage
Replacing React.useState with useQueryState
Have you setup your app with the appropriate adapter? Then you are all set!
If you are using React.useState to manage your local UI state, you can replace it with useQueryState to sync it with the URL.
'use client'
import { useQueryState } from 'nuqs'
export function Demo() {
const [name, setName] = useQueryState('name')
return (
<>
<input value={name || ''} onChange={e => setName(e.target.value)} />
<button onClick={() => setName(null)}>Clear</button>
<p>Hello, {name || 'anonymous visitor'}!</p>
</>
)
}