useStorage

A React hook for persisting data between frame updates. Stored data survives widget re-renders and frame refreshes, making it useful for caching tokens, user preferences, or any state that should persist across sessions.

Import

import { useStorage } from "~lib/use-storage";

API

const [data, setData] = useStorage<T>();

The hook is generic -- pass a type parameter to get typed access to your stored data.

Parameters

This hook takes no parameters.

Return Value

The hook returns a tuple:

Index	Name	Type	Description
`[0]`	`data`	`T`	The currently stored data
`[1]`	`setData`	`(data: T) => void`	Function to update the stored data

Examples

Basic Usage

import { useStorage } from "~lib/use-storage";

const Widget = () => {
  const [data, setData] = useStorage();

  const newRefreshToken = getNewRefreshToken(data.refreshToken);
  setData({
    refreshToken: newRefreshToken,
  });

  return (
    <div>
      Old Refresh Token: {data.refreshToken}
      <br />
      New Refresh Token: {newRefreshToken}
    </div>
  );
};

Typed Storage

Use a type parameter for type-safe access to your stored data:

import { useStorage } from "~lib/use-storage";

type UserPreferences = {
  refreshToken: string;
  lastViewedPage: string;
  displayName: string;
};

const Widget = () => {
  const [preferences, setPreferences] = useStorage<UserPreferences>();

  const handleUpdate = () => {
    setPreferences({
      ...preferences,
      lastViewedPage: "/dashboard",
    });
  };

  return (
    <div>
      <p>Welcome, {preferences.displayName}</p>
      <p>Last visited: {preferences.lastViewedPage}</p>
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
};

Import​

API​

Parameters​

Return Value​

Examples​

Basic Usage​

Typed Storage​

See Also​