Create localStorage State

Exports Size

Gzip Size

Brotli Size

Source Code

Docs

Store your shared state that lives in localStorage and synchronize the state of a component with the data stored in the localStorage. Lift your state up and passing them deeply into your React app without worrying about performance.

Usage

First, create a shared hooks with createLocalStorageState. It is recommended to place them in a separate file:

src/context/sidebar-active.tsx


import { createLocalStorageState } from 'foxact/create-local-storage-state';
 
export const [useSidebarActive, useSidebarActiveValue, useSetSidebarActive] = createLocalStorageState(
  'sidebar-active', // The localStorage key
  /**
   * The initial value to use if there is no item in the local storage with the provided key,
   * the undefined value will be used if no initial value is provided.
   *
   * Also, the initial value will also be used during the server-side rendering, see below.
   */
  false,
  /**
   * Optional configuration object enables the customization of value serialization before it's stored in local storage.
   */
  {
    // Optional, default to false. When set to "true", the value will be passed to the localStorage API as is.
    raw: false,
    // Optional, default to "JSON.stringify". Can only be specified when the "raw" is set to false (which is the default).
    serializer: JSON.stringify,
    // Optional, default to "JSON.parse". Can only be specified when the "raw" is set to false (which is the default).
    deserializer: JSON.parse,
  }
);

And now you can use these hooks anywhere in your app:

s../../components/sidebar.tsx


import { memo } from 'react';
import { useSetSidebarActive, useSidebarActive, useSidebarActiveValue } from '../context/sidebar-active';
 
function Sidebar() {
  const [sidebarActive, setSidebarActive] = useSidebarActive();
  // If you only need the value, you can use useSidebarActiveValue instead:
  const sidebarActive = useSidebarActiveValue();
  // If you only need the setter, you can use useSetSidebarActive instead:
  const setSidebarActive = useSetSidebarActive();
 
  return (
    <div className={`sidebar ${sidebarActive ? 'active' : ''}`}>
      <button onClick={() => setSidebarActive(false)}>Close Sidebar</button>
      <button onClick={() => setSidebarActive(true)}>Open Sidebar</button>
    </div>
  );
}
 
export default memo(Sidebar);

Server-side Rendering

If the second argument (the initial value) is provided, React will use the initial value to render the UI and generate HTML on the server, otherwise React will find the closest <Suspense> boundary and render its fallback UI into the generated server HTML on the server. See useLocalStorage for more information.