nuqs https://www.npmjs.com/package/nuqs Search params state manager for React
import { parseAsInteger, useQueryState } from 'nuqs'
import { NuqsAdapter } from 'nuqs/adapters/react'
const Component = () => {
const [hello, setHello] = useQueryState('hello', { defaultValue: '' })
const [count, setCount] = useQueryState('count', parseAsInteger.withDefault(0))
return (
<div style={{ border: '1px solid grey', padding: '10px' }}>
<button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>{' '}
<input
value={hello}
placeholder="Enter your name"
onChange={(e) => setHello(e.target.value || null)}
/>
<p>Hello, {hello || 'anonymous visitor'}!</p>
<i>Check dynamically changing url and refresh the page to test values persistence</i>
</div>
)
}
const App = () => (
<NuqsAdapter>
<Component />
</NuqsAdapter>
)