Create sessionStorage State

import { createSessionStorageState } from 'foxact/create-session-storage-state';
 
export const [useSidebarActive, useSidebarActiveValue, useSetSidebarActive] = createSessionStorageState(
  'sidebar-active', // The sessionStorage 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 sessionStorage 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,
  }
);

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