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:

npm install use-json-param

With yarn:

yarn add use-json-param

With pnpm:

pnpm add use-json-param

Usage

Kitchen sink

import React from "react";
import { BrowserRouter } from "react-router-dom";
import {
  useJsonParam // Also useJSONParam alias
} from "use-json-param";

function Page () {
  const [jsonParams, setJsonParams] = useJsonParam() // default key is "q"
  const otherJsonParams, setOtherJsonParams] = useJsonParams({
    // Optional defaults will be deeply merged with setOtherJsonParams
    foo: true,
    baz: false
  })

  // With key and defaults
  const [anotherJsonParams, setAnotherJsonParams] = useJsonParams('custom', {
    nananan: 'batman'
  })

  const handleUpdateParams = () => setJsonParams({foo: true, bar: false})

  return <main>
    <button type="button" onClick={handleUpdateParams}>Update</button>
  </main>
}

export default function App() {
  return (
    <BrowserRouter>
      <Page>
    </BrowserRouter>
  );
}

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