useUrlState

A hook that store the state into url query.

Install

bash

npm i @ahooksjs/use-url-state -S

This hook relies on useLocation & useHistory & useNavigate from react-router, to use this hook, you need to ensure

1. Your project is using react-router version 5.0 or 6.0 to manage routing

2. Installed @ahooksjs/use-url-state

Usage

import useUrlState from '@ahooksjs/use-url-state';

Examples

CodeSandbox Demo

React Router V5: https://codesandbox.io/s/suspicious-feather-cz4e0?file=/App.tsx

React Router V6: https://codesandbox.io/s/autumn-shape-odrt9?file=/App.tsx

Default usage

Multi-state management

Multi-state management (split)

Custom query-string options

API

typescript

const [state, setState] = useUrlState(baseState, options);

Params

Property	Description	Type	Default
baseState	URL search params will be merged into BaseState	`S \| () => S`	-
options	Url config	`Options`	-

Options

Property	Description	Type	Default
navigateMode	Type of history navigate mode	`'push' \| 'replace'`	`'push'`
parseOptions	parse options of `query-string`	`ParseOptions`	-
stringifyOptions	stringify options of `query-string`	`StringifyOptions`	-

Result

Property	Description	Type
state	Url query object	`object`
setState	Same as useState, but state should be object	`(state: S) => void \| (() => ((state: S) => S))`