useSearchParamState

The useSearchParamState hook is similar to useState and usePersistedSetting, but stores the state value in the URL search params. This way the value is persisted if you reload the page, or share the url, but not on new sessions or on navigation.

Since the value is stored in the URL search params, it must be a string (or null to indicate no value). If the third parameter is set to true, multiple values can be stored.

The most common usage for this is probably filter selections.

Example

import { useData, useFilter, useSearchParamState } from "@olenbetong/appframe-react";

function MyComponent() {
  let [domains, setDomains] = useSearchParamState("domain", null, true);
  let myDomains = useData(dsMyDomains);
  useFilter(
    dsMyDataObject,
    domains.length ? `[Domain] IN (${domains.map((d) => `'${d}'`)})` : ""
  );

  function handleChange(evt) {
    let domains = Array.from(evt.target.querySelectorAll("option:checked")).map(
      (o) => o.value
    );

    setDomains(domains);
  }

  return (
    <select multiple>
      {myDomains.map((domain) => (
        <option key={domain.Domain} value={domain.Domain}>
          {domain.Domain} - {domain.Name}
        </option>
      ))}
    </select>
  );
}

API

declare type SearchParamValue = string | null;
/**
 * A hook that wraps useState, and keeps the state value synced with
 * a search parameter.
 *
 * @param {string} key They key used to store the value in the search parameters
 * @param {SearchParamValue} fallbackValue Default value for the state. Only used if the search parameters do not contains a value for the key parameter
 */
export declare function useSearchParamState(
  key: string,
  fallbackValue?: SearchParamValue | (() => SearchParamValue),
  multiple?: false
): [SearchParamValue, React.Dispatch<React.SetStateAction<SearchParamValue>>];
export declare function useSearchParamState(
  key: string,
  fallbackValue: string[] | (() => string[]),
  multiple: true
): [string[], React.Dispatch<React.SetStateAction<string[]>>];
``;