npm

Need private packages and team management tools?Check out npm Orgs. »

react-router-query-params-hook

1.0.4 • Public • Published

react-router-query-params-hook

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

Installation

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:

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:

// 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:

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

install

npm i react-router-query-params-hook

Downloadsweekly downloads

12

version

1.0.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability