# react-router-query-params-hook

> React Hook for React Router for De-/Serializing query params

Latest version **1.0.4** (published 2019-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-query-params-hook
pnpm add react-router-query-params-hook
yarn add react-router-query-params-hook
bun add react-router-query-params-hook
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-02-01 |
| First published | 2019-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Benjamin Makus |
| Maintainers | benneq |
| Keywords | react, react-dom, react-router |

## Links

- npm: https://www.npmjs.com/package/react-router-query-params-hook
- Repository: https://benneq@github.com/benneq/react-router-query-params-hook
- Homepage: https://github.com/benneq/react-router-query-params-hook#readme
- Issues: https://github.com/benneq/react-router-query-params-hook/issues
- npm.io page: https://npm.io/package/react-router-query-params-hook

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2019-02-01
- 1.0.3 — 2019-01-26
- 1.0.2 — 2019-01-26
- 1.0.1 — 2019-01-26
- 1.0.0 — 2019-01-25

## README

# react-router-query-params-hook
React Hook for React Router for De-/Serializing query params

## Installation 
```sh
npm install react-router-query-params-hook
```

## Usage
First you have to create your actual `useQueryParams` hook. `react-router` only
returns a string for `location.search`, though you have to provide your own functions
for de-/serializing the query string.

You can for example use `qs`:
```ts
export const useQueryParams = useQueryParamsFactory(
    (queryString) => qs.parse(queryString, { ignoreQueryPrefix: true }),
    (params) => qs.stringify(params, { encode: true, addQueryPrefix: true })
);
```

Now your `useQueryParams` hook is ready for use:
```ts
// The input value of deserializer is the output of `qs.parse` (or whatever you use)
const deserializer = (value) => ({
    foo: value.foo ? Number.parseInt(value.foo) : undefined
});

// The return value of serializer is the input of `qs.stringify` (or whatever you use)
const serializer = (value) => ({
    foo: value.foo ? value.foo.toString() : undefined
});

// if you don't want to use an additional serializer, you
// can just pass an identity function for de-/serializer:
// (value) => value

export const MyComponent: React.FunctionComponent<Props> = (props) => {
    const [params, setParams] = useQueryParams(deserializer, serializer);

    useEffect(() => {
        console.log("Params Changed", params);
    }, [params]);

    return (
        <>
            Params: {JSON.stringify(params)}<br />
            <button onClick={() => setParams({foo:42})}>Set Params</button>
        </>
    )
};
```

### Options
You can call `setParams` with an optional options object:
```ts
const [params, setParams] = useQueryParams(deserializer, serializer);

// When using `keepUrl` the Browser URL won't update
setParams(newParams, { keepUrl: true });

// When using `force` it will trigger a state change, even if old and new params are the same
setParams(newParams, { force: true });

// When using `push` it will push a new state to browser history, instead of replace (default)
setParams(newParams, { push: true });
```

## Todo
- `merge` option

---
_Source: https://npm.io/package/react-router-query-params-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._