use-json-param

Little wrapper around useSearchParams for large JSON objects

Table of Contents

• use-json-param
  • Table of Contents
  • Background
  • Install
  • Usage
    • Kitchen sink
  • API
  • Contributing
  • License

Background

This library combines React Router v6's useSearchParams with JSONCrush to persist large JSON objects to the URL query string in a highly compressed manner. You'll likely only want to use it if you need to persist a lot of things to the query string and want to avoid possibly running into max length issues.

Install

Install the package locally within you project folder with your package manager:

With npm:

1npm install use-json-param

With yarn:

1yarn add use-json-param

With pnpm:

1pnpm add use-json-param

Usage

Kitchen sink

1import React from "react";
2import { BrowserRouter } from "react-router-dom";
3import {
4  useJsonParam // Also useJSONParam alias
5} from "use-json-param";
6
7function Page () {
8  const [jsonParams, setJsonParams] = useJsonParam() // default key is "q"
9  const otherJsonParams, setOtherJsonParams] = useJsonParams({
10    // Optional defaults will be deeply merged with setOtherJsonParams
11    foo: true,
12    baz: false
13  })
14
15  // With key and defaults
16  const [anotherJsonParams, setAnotherJsonParams] = useJsonParams('custom', {
17    nananan: 'batman'
18  })
19
20  const handleUpdateParams = () => setJsonParams({foo: true, bar: false})
21
22  return <main>
23    <button type="button" onClick={handleUpdateParams}>Update</button>
24  </main>
25}
26
27export default function App() {
28  return (
29    <BrowserRouter>
30      <Page>
31    </BrowserRouter>
32  );
33}

API

For all configuration options, please see the API docs.

Contributing

Got an idea for a new feature? Found a bug? Contributions are welcome! Please open up an issue or make a pull request.

License

MIT © Tiaan du Plessis