How to use use-persisted-state - 10 common examples

// for horizontally and verically shifted, the sort order needs a small hack so the drawing of the
    // rectangle works correctly
    const temp = limitedPointsSorted[2];
    limitedPointsSorted[2] = limitedPointsSorted[3];
    limitedPointsSorted[3] = temp;
  }
  return limitedPointsSorted;
};

const panZoomContainerStyles = {
  outline: "none",
  height: "100vh",
  width: "100vw"
};

const useModeState = createPersistedState("dm.settings.mode");
const useBrushShapeState = createPersistedState("dm.settings.brushShape");
const useToolState = createPersistedState("dm.settings.tool");
const useLineWidthState = createPersistedState("dm.settings.lineWidth");

const calculateRectProps = (p1, p2) => {
  const width = Math.max(p1.x, p2.x) - Math.min(p1.x, p2.x);
  const height = Math.max(p1.y, p2.y) - Math.min(p1.y, p2.y);
  const x = Math.min(p1.x, p2.x);
  const y = Math.min(p1.y, p2.y);

  return { x, y, width, height };
};

const reduceOffsetToMinimum = (offset, sideLength) => {
  const newOffset = offset - sideLength;
  if (newOffset > 0) return reduceOffsetToMinimum(newOffset, sideLength);

// rectangle works correctly
    const temp = limitedPointsSorted[2];
    limitedPointsSorted[2] = limitedPointsSorted[3];
    limitedPointsSorted[3] = temp;
  }
  return limitedPointsSorted;
};

const panZoomContainerStyles = {
  outline: "none",
  height: "100vh",
  width: "100vw"
};

const useModeState = createPersistedState("dm.settings.mode");
const useBrushShapeState = createPersistedState("dm.settings.brushShape");
const useToolState = createPersistedState("dm.settings.tool");
const useLineWidthState = createPersistedState("dm.settings.lineWidth");

const calculateRectProps = (p1, p2) => {
  const width = Math.max(p1.x, p2.x) - Math.min(p1.x, p2.x);
  const height = Math.max(p1.y, p2.y) - Math.min(p1.y, p2.y);
  const x = Math.min(p1.x, p2.x);
  const y = Math.min(p1.y, p2.y);

  return { x, y, width, height };
};

const reduceOffsetToMinimum = (offset, sideLength) => {
  const newOffset = offset - sideLength;
  if (newOffset > 0) return reduceOffsetToMinimum(newOffset, sideLength);
  return offset - sideLength;

useCallback
} from "react";
import produce from "immer";
import debounce from "lodash/debounce";
import useAsyncEffect from "@n1ru4l/use-async-effect";
import createPersistedState from "use-persisted-state";
import { Modal } from "./modal";
import { DmMap } from "./dm-map";
import { SelectMapModal } from "./select-map-modal";
import { SetMapGrid } from "./set-map-grid";
import { useSocket } from "../socket";
import { useStaticRef } from "../hooks/use-static-ref";
import { AuthenticationScreen } from "../authentication-screen";
import { LoadingScreen } from "../loading-screen";

const useLoadedMapId = createPersistedState("loadedMapId");
const useDmPassword = createPersistedState("dmPassword");

const INITIAL_MODE = {
  title: "LOADING",
  data: null
};

export const DmArea = () => {
  const socket = useSocket();
  const [data, setData] = useState(null);
  const [loadedMapId, setLoadedMapId] = useLoadedMapId(null);
  const loadedMapIdRef = useRef(loadedMapId);
  const [liveMapId, setLiveMapId] = useState(null);
  // LOADING, AUTHENTICATE, EDIT_MAP, SET_MAP_GRID, SHOW_MAP_LIBRARY
  const [mode, setMode] = useState(INITIAL_MODE);

import styled from 'styled-components'
import StyleEditor from './StyleEditor'
import './index.css'

const Container = styled.div`
  display: flex;
  padding: 0;
  height: 100%;
  border-top: 1px solid #ccc;
  .editor {
    padding: 0;
  }
`

const text = '[One Line][Another Line]'
const useStyles = createPersistedState('element-styles')
const useEditorState = createPersistedState('editor-state')

const App = () => {
  const [styles, setStyles] = useStyles({})

  const [editorState, setEditorState] = useEditorState(() => EditorState.fromJSON({
    text,
    ranges: [],
    entityMap: {}
  }))
    console.log(editorState)

  const onSelectStyle = (style: string) => {
    const { start, end, list } = editorState
    const isCollapsed = start === end
    const styleList = style ? [style] : []

import React, {FC, useContext, useEffect, useCallback, useMemo} from 'react'
import createPersistedState from 'use-persisted-state'
import {Notebook, PipeData} from 'src/notebooks'
import {
  NotebookListContext,
  NotebookListProvider,
} from 'src/notebooks/context/notebook.list'
import {v4 as UUID} from 'uuid'
import {RemoteDataState} from 'src/types'

const useNotebookCurrentState = createPersistedState('current-notebook')

export interface NotebookContextType {
  id: string | null
  notebook: Notebook | null
  change: (id: string) => void
  add: (data: Partial, index?: number) => string
  update: (notebook: Partial) => void
  remove: () => void
}

export const DEFAULT_CONTEXT: NotebookContextType = {
  id: null,
  notebook: null,
  add: () => '',
  change: () => {},
  update: () => {},

import React, { useState } from "react";
import questions from "../questions/index";
import Question from "../ui/Question/Question";
import QuestionsHeader from "../ui/QuestionsHeader/QuestionsHeader";
import createPersistedState from "use-persisted-state";
const useItemsState = createPersistedState("items");
const useHideState = createPersistedState("hideCompleted");

const Home = () => {
  const [items, setItems] = useItemsState([]);
  const [hideCompleted, setHideCompleted] = useHideState(false);

  const handleItems = questionId => {
    if (items && items.find(item => item == questionId)) {
      setItems(items.filter(item => item != questionId));
    } else {
      setItems([...items, questionId]);
    }
  };

  const resetItems = () => {
    setItems([]);

import React, { useState } from "react";
import questions from "../questions/index";
import Question from "../ui/Question/Question";
import QuestionsHeader from "../ui/QuestionsHeader/QuestionsHeader";
import createPersistedState from "use-persisted-state";
const useItemsState = createPersistedState("items");
const useHideState = createPersistedState("hideCompleted");

const Home = () => {
  const [items, setItems] = useItemsState([]);
  const [hideCompleted, setHideCompleted] = useHideState(false);

  const handleItems = questionId => {
    if (items && items.find(item => item == questionId)) {
      setItems(items.filter(item => item != questionId));
    } else {
      setItems([...items, questionId]);
    }
  };

  const resetItems = () => {
    setItems([]);
  };

import React, {FC} from 'react'
import createPersistedState from 'use-persisted-state'
import {v4 as UUID} from 'uuid'
import {
  NotebookList,
  Notebook,
  NotebookState,
  Resource,
  PipeData,
  PipeMeta,
} from 'src/notebooks'
import {default as _asResource} from 'src/notebooks/context/resource.hook'

const useNotebookListState = createPersistedState('notebooks')

export interface NotebookListContextType extends NotebookList {
  add: (notebook?: Notebook) => string
  update: (id: string, notebook: Notebook) => void
  remove: (id: string) => void
}

export const EMPTY_NOTEBOOK: NotebookState = {
  data: {
    byID: {},
    allIDs: [],
  } as Resource,
  meta: {
    byID: {},
    allIDs: [],
  } as Resource,

const temp = limitedPointsSorted[2];
    limitedPointsSorted[2] = limitedPointsSorted[3];
    limitedPointsSorted[3] = temp;
  }
  return limitedPointsSorted;
};

const panZoomContainerStyles = {
  outline: "none",
  height: "100vh",
  width: "100vw"
};

const useModeState = createPersistedState("dm.settings.mode");
const useBrushShapeState = createPersistedState("dm.settings.brushShape");
const useToolState = createPersistedState("dm.settings.tool");
const useLineWidthState = createPersistedState("dm.settings.lineWidth");

const calculateRectProps = (p1, p2) => {
  const width = Math.max(p1.x, p2.x) - Math.min(p1.x, p2.x);
  const height = Math.max(p1.y, p2.y) - Math.min(p1.y, p2.y);
  const x = Math.min(p1.x, p2.x);
  const y = Math.min(p1.y, p2.y);

  return { x, y, width, height };
};

const reduceOffsetToMinimum = (offset, sideLength) => {
  const newOffset = offset - sideLength;
  if (newOffset > 0) return reduceOffsetToMinimum(newOffset, sideLength);
  return offset - sideLength;
};

import createPersistedState from 'use-persisted-state';

const noop = () => {};

const defaultElement = (global.document && global.document.body) || {
  classList: {
    add: noop,
    remove: noop,
  },
};

const ONCE = [];

const preferDarkQuery = '(prefers-color-scheme: dark)';
const usePersistedStateKey = 'darkMode';
const usePersistedDarkModeState = createPersistedState(usePersistedStateKey);

const defaultClassNameDark = 'dark-mode';
const defaultClassNameLight = 'light-mode';
const defaultConfig = {
  classNameDark: defaultClassNameDark,
  classNameLight: defaultClassNameLight,
  element: defaultElement,
};
const mql = global.matchMedia
  ? global.matchMedia(preferDarkQuery)
  : {
    addListener: noop,
    removeListener: noop,
  };

const setDOMClass = (element, method, className) => {