useQueryParamsState

State Management

A React hook that manages state synchronized with URL query parameters, automatically persisting state and keeping it in sync with browser navigation.

Installation

npm install @thibault.sh/hooks

API Reference

Signature

function useQueryParamsState<T>(
  key: string,
  initialValue: T,
  options?: {
    serialize?: (value: T) => string;
    deserialize?: (value: string) => T;
  }
): [T, (value: T | ((val: T) => T)) => void]

Parameters

Name	Type	Description	Default
`key`	string	The query parameter key to use in the URL.	-
`initialValue`	T	Default value when the parameter doesn't exist.	-
`options` optional	object	Configuration options for serialization.	-
`options.serialize` optional	(value: T) => string	Custom function to convert value to string.	`JSON.stringify`
`options.deserialize` optional	(value: string) => T	Custom function to parse string back to value.	`JSON.parse`

Returns

[T, (value: T | ((val: T) => T)) => void]

A tuple containing the current state value and setter function.

Properties:

Property	Type	Description
`[0]`	T	Current state value synchronized with URL query parameter.
`[1]`	(value: T \| ((val: T) => T)) => void	Setter function that updates both state and URL query parameter.