React Hook for managing state in URL query parameters with easy serialization. 

pbeshai

use-query-params

  "description": "React Hook for managing state in URL query parameters with easy serialization.",

    "build": "npm-run-all build:code build:adapters copy:adapters",

    "build:code": "package-bundler --copyPackageJson --rewritePackageJson --tsconfigPath ./tsconfig.build.json",

    "build:adapters": "npx lerna run build --scope \"*-adapter-*\"",

    "copy:adapters": "scripts/copy-adapters.js",

    "build-website": "npm run test && npm run build && cd examples/website-example && npm run build && npm run copy-build",

    "dev": "cross-env NODE_ENV=development tsc -m esNext --outDir esm -w",

    "prepublishOnly": "npm-run-all test:run clean build",

    "lint": "eslint --ext js,ts,tsx src",

    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",

    "test-coverage": "vitest run --coverage"

    "url": "https://github.com/pbeshai/use-query-params.git"

  "author": "Peter Beshai <peter.beshai@gmail.com>",

    "@typescript-eslint/eslint-plugin": "^4.22.0",

    "@typescript-eslint/parser": "^4.22.0",

    "eslint-plugin-react-hooks": "^4.2.0",

    "react-router-5": "npm:react-router@^5.3.3",

    "react-router-6": "npm:react-router@^6.3.0",

    "react-router-dom-5": "npm:react-router-dom@^5.3.3",

    "react-router-dom-6": "npm:react-router-dom@^6.3.0"

    "serialize-query-params": "^2.0.0-rc.0"

  "gitHead": "443df91b390fe0503bfbe6a437e1b762a70502c9",

  "gitHead": "17a70ebac972db14b69cda83e50eba8a6020c54e",

  "gitHead": "443df91b390fe0503bfbe6a437e1b762a70502c9"

  "gitHead": "17a70ebac972db14b69cda83e50eba8a6020c54e"

  <p>A <a href="https://reactjs.org/docs/hooks-intro.html">React Hook</a>, HOC, and Render Props solution for managing state in URL query parameters with easy serialization.

  <p>Works with <a href="https://reacttraining.com/react-router/">React Router</a> out of the box. TypeScript supported.</p>

<a href="#installation">Installation</a> |

When creating apps with easily shareable URLs, you often want to encode state as query parameters, but all query parameters must be encoded as strings. `useQueryParams` allows you to easily encode and decode data of any type as query parameters with smart memoization to prevent creating unnecessary duplicate objects. It uses [serialize-query-params](../serialize-query-params/).

**Migrating from v1?** See [details in the changelog](./CHANGELOG.md#migrating-from-v1).

Link your routing system via an adapter (e.g., [React Router 6 example](../../examples/react-router-6/src/index.tsx), [React Router 5 example](../../examples/reach-router-5/src/index.tsx)):

Link your routing system via an adapter (e.g., [React Router 6 example](../../examples/react-router-6/src/index.tsx), [React Router 5 example](../../examples/react-router-5/src/index.tsx)):

import { QueryParamProvider } from 'use-query-params';

import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';

import { BrowserRouter, Route, Routes } from 'react-router-dom';

  document.getElementById('root') as HTMLElement

By default, use-query-params uses [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) to handle interpreting the location string, which means it does not decode `null` and has limited handling of other more advanced URL parameter configurations. If you want access to those features, add a third-party library like [query-string](https://github.com/sindresorhus/query-string) and tell use-query-params to use it:

// optionally use the query-string parse / stringify functions to

// handle more advanced cases than URLSearchParams supports.

import { parse, stringify } from 'query-string';

Be sure to add **QueryParamProvider** as shown in Installation above. 

Add the hook to your component. There are two options: `useQueryParam`:

import { useQueryParam, NumberParam, StringParam } from 'use-query-params';

  // something like: ?x=123&foo=bar in the URL

  const [num, setNum] = useQueryParam('x', NumberParam);

  const [foo, setFoo] = useQueryParam('foo', StringParam);

      <button onClick={() => setNum(Math.random())}>Change</button>

      <button onClick={() => setFoo(`str${Math.random()}`)}>Change</button>

// create a custom parameter with a default value

		{
		"name": "use-query-params",
		"version": "2.0.0-rc.1",
		"version": "2.0.0",
		"description": "React Hook for managing state in URL query parameters with easy serialization.",
		@@ -75,3 +75,3 @@ "main": "./index.cjs.js",
		"dependencies": {
		"serialize-query-params": "^2.0.0-rc.0"
		"serialize-query-params": "^2.0.0"
		},
		@@ -93,4 +93,4 @@ "husky": {
		},
		"gitHead": "443df91b390fe0503bfbe6a437e1b762a70502c9",
		"gitHead": "17a70ebac972db14b69cda83e50eba8a6020c54e",
		"types": "./index.d.ts"
		}

		{
		"name": "use-query-params",
		"version": "2.0.0-rc.1",
		"version": "2.0.0",
		"description": "React Hook for managing state in URL query parameters with easy serialization.",
		@@ -75,3 +75,3 @@ "main": "./dist/index.cjs.js",
		"dependencies": {
		"serialize-query-params": "^2.0.0-rc.0"
		"serialize-query-params": "^2.0.0"
		},
		@@ -93,3 +93,3 @@ "husky": {
		},
		"gitHead": "443df91b390fe0503bfbe6a437e1b762a70502c9"
		"gitHead": "17a70ebac972db14b69cda83e50eba8a6020c54e"
		}

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes

		@@ -37,3 +37,3 @@ <div align="center">

		Link your routing system via an adapter (e.g., [React Router 6 example](../../examples/react-router-6/src/index.tsx), [React Router 5 example](../../examples/reach-router-5/src/index.tsx)):
		Link your routing system via an adapter (e.g., [React Router 6 example](../../examples/react-router-6/src/index.tsx), [React Router 5 example](../../examples/react-router-5/src/index.tsx)):

		@@ -40,0 +40,0 @@ ```js