Use-json-param NPM

use-json-param

Little wrapper around useSearchParams for large JSON objects

use-json-param

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>
  );
}