>
(paramConfigMap: QPCMap, WrappedComponent: React.ComponentType):
React.FC>>
```
Given a query parameter configuration (mapping query param name to `{ encode, decode }`) and
a component, inject the props `query` and `setQuery` into the component based on the config.
The setter takes two arguments `(newQuery, updateType)` where updateType
is one of `'pushIn' | 'push' | 'replaceIn' | 'replace'`, defaulting to
`'pushIn'`.
**Example**
```js
import { withQueryParams, StringParam, NumberParam } from 'use-query-params';
const MyComponent = ({ query, setQuery, ...others }) => {
const { foo, bar } = query;
return foo = {foo}, bar = {bar}
}
// reads query parameters `foo` and `bar` from the URL and stores their decoded values
export default withQueryParams({ foo: NumberParam, bar: StringParam }, MyComponent);
```
Note 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.
#### QueryParams
```js
{({ query, setQuery }) => foo = {query.foo}
}
```
Given a query parameter configuration (mapping query param name to `{ encode, decode }`) and
a component, provide render props `query` and `setQuery` based on the config.
The setter takes two arguments `(newQuery, updateType)` where updateType
is one of `'pushIn' | 'push' | 'replaceIn' | 'replace'`, defaulting to
`'pushIn'`.
#### encodeQueryParams
```js
encodeQueryParams(
paramConfigMap: QPCMap,
query: Partial>
): Partial>
```
Convert the values in query to strings via the encode functions configured
in paramConfigMap. This can be useful for constructing links using decoded
query parameters.
**Example**
```js
import { encodeQueryParams, NumberParam } from 'use-query-params';
// since v1.0 stringify is not exported from 'use-query-params',
// so you must install the 'query-string' package in case you need it
import { stringify } from 'query-string';
// encode each parameter according to the configuration
const encodedQuery = encodeQueryParams({ foo: NumberParam }, { foo });
const link = `/?${stringify(encodedQuery)}`;
```
#### QueryParamProvider
```js
// choose an adapter, depending on your router
import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
// optionally specify options
import { parse, stringify } from 'query-string';
const options = {
searchStringToObject: parse,
objectToSearchString: stringify,
}
// optionally nest parameters in options to get automatically on useQueryParams calls
{/* useQueryParams calls have access to foo here */}
...
... {/* useQueryParams calls have access to foo and bar here */}
...
```
The **QueryParamProvider** component links your routing library's history to
the **useQueryParams** hook. It is needed for the hook to be able to update
the URL and have the rest of your app know about it.
You can specify global options at the provider level.
##### QueryParamOptions
| option | default | description |
| --- | --- | --- |
| updateType | "pushIn" | How the URL gets updated by default, one of: replace, replaceIn, push, pushIn. |
| 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` |
| 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` |
| 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 }}`
| 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). |
| includeAllParams | false | Include all parameters found in the URL even if not configured in any param config. |
| 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()`) |
| *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. |
### Development
Run the typescript compiler in watch mode:
```
npm run dev
```
You can run an example app:
```
npm link
cd examples/react-router
npm install
npm link use-query-params
npm start
```
