Function ResizablePanelGroup

Parameters

• __namedParameters: HTMLAttributes<HTMLDivElement> & {
      children?: ReactNode;
      className?: string;
      defaultLayout?: Layout;
      disableCursor?: boolean;
      disabled?: boolean;
      elementRef?: Ref<null | HTMLDivElement>;
      groupRef?: Ref<null | GroupImperativeHandle>;
      id?: string | number;
      onLayoutChange?: (layout: Layout) => undefined | void;
      onLayoutChanged?: (layout: Layout) => undefined | void;
      orientation?: "horizontal" | "vertical";
      resizeTargetMinimumSize?: { coarse: number; fine: number };
      style?: CSSProperties;
  } & {
      direction?: "horizontal"
      | "vertical";
      onLayout?: (sizes: number[]) => void;
  }

  • Optionalchildren?: ReactNode

    Panel and Separator components that comprise this group.

  • OptionalclassName?: string

    CSS class name.

  • OptionaldefaultLayout?: Layout

    Default layout for the Group.

    ℹ️ This value allows layouts to be remembered between page reloads.

    ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes. Refer to the documentation for suggestions on how to minimize the impact of this.

  • OptionaldisableCursor?: boolean

    This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for Panels and Separators in this group.

  • Optionaldisabled?: boolean

    Disable resize functionality.

  • OptionalelementRef?: Ref<null | HTMLDivElement>

    Ref attached to the root HTMLDivElement.

  • OptionalgroupRef?: Ref<null | GroupImperativeHandle>

    Exposes the following imperative API:

    • getLayout(): Layout
    • setLayout(layout: Layout): void

    ℹ️ The useGroupRef and useGroupCallbackRef hooks are exported for convenience use in TypeScript projects.

  • Optionalid?: string | number

    Uniquely identifies this group within an application. Falls back to useId when not provided.

    ℹ️ This value will also be assigned to the data-group attribute.

  • OptionalonLayoutChange?: (layout: Layout) => undefined | void

    Called when the Group's layout is changing.

    ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the onLayoutChanged callback instead.

  • OptionalonLayoutChanged?: (layout: Layout) => undefined | void

    Called after the Group's layout has been changed.

    ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api.

  • Optionalorientation?: "horizontal" | "vertical"

    Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"

  • OptionalresizeTargetMinimumSize?: { coarse: number; fine: number }

    Minimum size of the resizable hit target area (either Separator or Panel edge) This threshold ensures are large enough to avoid mis-clicks.

    • Coarse inputs (typically a finger on a touchscreen) have reduced accuracy; to ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks.
    • Fine inputs (typically a mouse) can be smaller

    ℹ️ Apple interface guidelines suggest 20pt (27px) on desktops and 28pt (37px) for touch devices In practice this seems to be much larger than many of their own applications use though.

  • Optionalstyle?: CSSProperties

    CSS properties.

    ⚠️ The following styles cannot be overridden: display, flex-direction, flex-wrap, and overflow.

  • Optionaldirection?: "horizontal" | "vertical"

    Deprecated

    16 April 2026. Renamed to orientation

  • OptionalonLayout?: (sizes: number[]) => void

    Called when the panel sizes change, with an array of sizes in the same order as the panels

    Deprecated

    16 April 2026. Use onLayoutChange or onLayoutChanged which provide more detailed layout information.