usePersistedSetting

The usePersistedSetting hooks is similar to the useState hook, but stores the value in and Indexed DB. This is useful to store user selections and settings that should be persisted on page reload, but not when sharing the URL with someone else (For that, see useSearchParamState.

Like useSearchParamState, and unlike useState, a key/name needs to be passed as the first parameter.

Example

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

function MySettingComponent() {
  let [includeClosed, setIncludeClosed] = usePersistedSetting(
    "includeClosed",
    false
  );
  useFilter(dsIssues, includeClosed ? "" : "[Closed] IS NULL");

  return (
    <FormControlLabel
      control={
        <Checkbox
          value={includeClosed}
          onChange={(_, checked) => setIncludeClosed(checked)}
        />
      }
      label="Include closed issues"
    />
  );
}

API

/**
 * On mount, load the persisted state from Indexed DB, and if the persisted
 * layout version matches, restore the layout. Then listen to changes to the
 * state, and store the latest version in Indexed DB.
 */
export declare function usePersistedSetting<T = unknown>(
  key: string,
  defaultValue: T
): [T, (newValue: T) => void];