nuqs - entropy

nuqs

クエリパラメータ状態管理ライブラリ

e.g. Client Component

code:tsx

'use client'

import { parseAsInteger, useQueryState } from 'nuqs'

export function Demo() {

const hello, setHello = useQueryState('hello', { defaultValue: '' })

const count, setCount = useQueryState(

'count',

parseAsInteger.withDefault(0)

)

return (

<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>

</>

)

}