next-query-string-navigation

React hook to be used on NextJS components to trigger url based navigation. It's useful on lists where parameters like pageNumber, pageSize, sort and query are added to URL and should refresh the page.

Install

1npm install next-query-string-navigation

Usage

Calling changeQueryStringParams will add/replace informed parameters in the url querystring and trigger a redirection with useRouter push method.

1import { useQueryStringNavigation } from "next-query-string-navigation";
2
3const [changeQueryStringParams] = useQueryStringNavigation();
4
5const handlePageNumber = (pageNumber: number) => {
6  changeQueryStringParams({"pageNumber": String(pageNumber)})
7};
8
9const handleSort = (sort: string) => {
10  changeQueryStringParams({"pageNumber": "1", "sort": sort});
11};
12
13const doFilter = (newFilter: string) => {
14  changeQueryStringParams({"pageNumber": "1", "query": newFilter});
15};

Then, you can get the updated querystring from searchParams.

License

MIT