>\n (paramConfigMap: QPCMap, WrappedComponent: React.ComponentType):\n React.FC>>\n```\n\nGiven a query parameter configuration (mapping query param name to `{ encode, decode }`) and\na component, inject the props `query` and `setQuery` into the component based on the config.\n\nThe setter takes two arguments `(newQuery, updateType)` where updateType\nis one of `'pushIn' | 'push' | 'replaceIn' | 'replace'`, defaulting to\n`'pushIn'`.\n\n**Example**\n\n```js\nimport { withQueryParams, StringParam, NumberParam } from 'use-query-params';\n\nconst MyComponent = ({ query, setQuery, ...others }) => {\n const { foo, bar } = query;\n return foo = {foo}, bar = {bar}
\n}\n\n// reads query parameters `foo` and `bar` from the URL and stores their decoded values\nexport default withQueryParams({ foo: NumberParam, bar: StringParam }, MyComponent);\n```\n\nNote there is also a variant called `withQueryParamsMapped` that allows you to do a react-redux style mapStateToProps equivalent. See [the code](./src/withQueryParams.tsx#L51) or [this example](../../examples/react-router/src/ReadmeExample3Mapped.tsx) for details.\n\n
\n\n\n\n#### QueryParams\n\n```js\n\n {({ query, setQuery }) => foo = {query.foo}
}\n\n```\n\nGiven a query parameter configuration (mapping query param name to `{ encode, decode }`) and\na component, provide render props `query` and `setQuery` based on the config.\n\nThe setter takes two arguments `(newQuery, updateType)` where updateType\nis one of `'pushIn' | 'push' | 'replaceIn' | 'replace'`, defaulting to\n`'pushIn'`.\n\n\n
\n\n\n#### encodeQueryParams\n\n```js\nencodeQueryParams(\n paramConfigMap: QPCMap,\n query: Partial>\n): Partial>\n```\n\nConvert the values in query to strings via the encode functions configured\nin paramConfigMap. This can be useful for constructing links using decoded\nquery parameters.\n\n**Example**\n\n```js\nimport { encodeQueryParams, NumberParam } from 'use-query-params';\n// since v1.0 stringify is not exported from 'use-query-params',\n// so you must install the 'query-string' package in case you need it\nimport { stringify } from 'query-string';\n\n// encode each parameter according to the configuration\nconst encodedQuery = encodeQueryParams({ foo: NumberParam }, { foo });\nconst link = `/?${stringify(encodedQuery)}`;\n```\n\n
\n\n#### QueryParamProvider\n\n```js\n// choose an adapter, depending on your router\nimport { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';\nimport { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';\n\n\n// optionally specify options\nimport { parse, stringify } from 'query-string';\nconst options = {\n searchStringToObject: parse,\n objectToSearchString: stringify,\n}\n\n \n\n\n// optionally nest parameters in options to get automatically on useQueryParams calls\n\n {/* useQueryParams calls have access to foo here */}\n ...\n \n \n ... {/* useQueryParams calls have access to foo and bar here */}\n \n \n ...\n \n\n```\n\nThe **QueryParamProvider** component links your routing library's history to\nthe **useQueryParams** hook. It is needed for the hook to be able to update\nthe URL and have the rest of your app know about it.\n\nYou can specify global options at the provider level.\n\n##### QueryParamOptions\n\n| option | default | description |\n| --- | --- | --- |\n| updateType | \"pushIn\" | How the URL gets updated by default, one of: replace, replaceIn, push, pushIn. |\n| searchStringToObject | from serialize-query-params | How to convert the search string e.g. `?foo=123&bar=x` into an object. Default uses URLSearchParams, but you could also use `parse` from query-string for example. `(searchString: string) => Record` |\n| objectToSearchString | from serialize-query-params | How to convert an object (e.g. `{ foo: 'x' }` -> `foo=x` into a search string – no \"?\" included). Default uses URLSearchParams, but you could also use `stringify` from query-string for example. `(query: Record) => string` |\n| params | undefined | Define parameters at the provider level to be automatically available to hook calls. Type is QueryParamConfigMap, e.g. `{ params: { foo: NumberParam, bar: BooleanParam }}`\n| includeKnownParams | undefined | When true, include all parameters that were configured via the `params` option on a QueryParamProvider. Default behavior depends on the arguments passed to useQueryParams (if not specifying any params, it is true, otherwise false). |\n| includeAllParams | false | Include all parameters found in the URL even if not configured in any param config. |\n| removeDefaultsFromUrl | false | When true, removes parameters from the URL when set is called if their value is the same as their default (based on the `default` attribute of the Param object, typically populated by `withDefault()`) |\n| *enableBatching* | false | - turns on batching (i.e., multiple consecutive calls to setQueryParams in a row only result in a single update to the URL). Likely will default to true in a future version. |\n\n\n\n\n\n
\n\n### Development\n\nRun the typescript compiler in watch mode:\n\n```\nnpm run dev\n```\n\n\nYou can run an example app:\n\n```\nnpm link\ncd examples/react-router\nnpm install\nnpm link use-query-params\nnpm start\n```\n","readmeFilename":"README.md"}
![\"npm\"](\"https://img.shields.io/npm/v/use-query-params.svg\")
\n ![\"Travis](\"https://img.shields.io/travis/com/pbeshai/use-query-params.svg\")
\n\n