Package Exports

next-query-string-navigation
next-query-string-navigation/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-query-string-navigation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

import { useQueryStringNavigation } from "next-query-string-navigation";

const [changeQueryStringParams] = useQueryStringNavigation();

const handlePageNumber = (pageNumber: number) => {
  changeQueryStringParams({"pageNumber": String(pageNumber)})
};

const handleSort = (sort: string) => {
  changeQueryStringParams({"pageNumber": "1", "sort": sort});
};

const doFilter = (newFilter: string) => {
  changeQueryStringParams({"pageNumber": "1", "query": newFilter});
};

Then, you can get the updated querystring from searchParams.

License

MIT