MCPcopy
hub / github.com/bvaughn/react-resizable-panels / useDefaultLayout

Function useDefaultLayout

lib/components/group/useDefaultLayout.ts:22–198  ·  view source on GitHub ↗
({
  debounceSaveMs = 100,
  onlySaveAfterUserInteractions,
  panelIds,
  storage = localStorage,
  ...rest
}: {
  /**
   * Debounce save operation by the specified number of milliseconds; defaults to 100ms
   *
   * @deprecated Use the {@link onLayoutChanged} callback instead; it does not require debouncing
   */
  debounceSaveMs?: number;

  /**
   * Only auto-save layouts that were directly caused by user input (e.g. keyboard or mouse events).
   * Ignore layout changes resulting from imperative API calls or window resize events.
   */
  onlySaveAfterUserInteractions?: boolean;

  /**
   * For Groups that contain conditionally-rendered Panels, this prop can be used to save and restore multiple layouts.
   *
   * ℹ️ This prevents layout shift for server-rendered apps.
   *
   * ⚠️ Panel ids must match the Panels rendered within the Group during mount or the initial layout will be incorrect.
   */
  panelIds?: string[] | undefined;

  /**
   * Storage implementation; supports localStorage, sessionStorage, and custom implementations
   * Refer to documentation site for example integrations.
   *
   */
  storage?: LayoutStorage;
} & (
  | {
      /**
       * Group id; must be unique in order for layouts to be saved separately.
       * @deprecated Use the {@link id} param instead
       */
      groupId: string;
    }
  | {
      /**
       * Uniquely identifies a specific group/layout.
       */
      id: string;
    }
))

Source from the content-addressed store, hash-verified

20 * It can be configured to store values using `localStorage`, `sessionStorage`, cookies, or any other persistence layer that makes sense for your application.
21 */
22export function useDefaultLayout({
23 debounceSaveMs = 100,
24 onlySaveAfterUserInteractions,
25 panelIds,
26 storage = localStorage,
27 ...rest
28}: {
29 /**
30 * Debounce save operation by the specified number of milliseconds; defaults to 100ms
31 *
32 * @deprecated Use the {@link onLayoutChanged} callback instead; it does not require debouncing
33 */
34 debounceSaveMs?: number;
35
36 /**
37 * Only auto-save layouts that were directly caused by user input (e.g. keyboard or mouse events).
38 * Ignore layout changes resulting from imperative API calls or window resize events.
39 */
40 onlySaveAfterUserInteractions?: boolean;
41
42 /**
43 * For Groups that contain conditionally-rendered Panels, this prop can be used to save and restore multiple layouts.
44 *
45 * ℹ️ This prevents layout shift for server-rendered apps.
46 *
47 * ⚠️ Panel ids must match the Panels rendered within the Group during mount or the initial layout will be incorrect.
48 */
49 panelIds?: string[] | undefined;
50
51 /**
52 * Storage implementation; supports localStorage, sessionStorage, and custom implementations
53 * Refer to documentation site for example integrations.
54 *
55 */
56 storage?: LayoutStorage;
57} & (
58 | {
59 /**
60 * Group id; must be unique in order for layouts to be saved separately.
61 * @deprecated Use the {@link id} param instead
62 */
63 groupId: string;
64 }
65 | {
66 /**
67 * Uniquely identifies a specific group/layout.
68 */
69 id: string;
70 }
71)) {
72 const hasPanelIds = panelIds !== undefined;
73 const id = "id" in rest ? rest.id : rest.groupId;
74
75 const readStorageKey = getStorageKey(id, panelIds ?? []);
76
77 // In the event that a client-only storage API is provided,
78 // useSyncExternalStore prevents server/client hydration mismatch warning
79 // This is not ideal; if possible a server-friendly storage API should be used

Callers 8

PersistentLayoutsRouteFunction · 0.85
cookieStorage.tsxFile · 0.85
PageFunction · 0.85
HomeRouteFunction · 0.85

Calls 2

getStorageKeyFunction · 0.90
readLegacyLayoutFunction · 0.90

Tested by

no test coverage detected