Function ResizablePanel

Parameters

• __namedParameters: BasePanelAttributes & {
      className?: string;
      collapsedSize?: string | number;
      collapsible?: boolean;
      defaultSize?: string | number;
      disabled?: boolean;
      elementRef?: Ref<null | HTMLDivElement>;
      groupResizeBehavior?: "preserve-relative-size" | "preserve-pixel-size";
      id?: string | number;
      maxSize?: string | number;
      minSize?: string | number;
      onResize?: (
          panelSize: PanelSize,
          id: undefined | string | number,
          prevPanelSize: undefined | PanelSize,
      ) => void;
      panelRef?: Ref<null | PanelImperativeHandle>;
      style?: CSSProperties;
  } & {
      collapsedSize?: string
      | number;
      defaultSize?: string | number;
      maxSize?: string | number;
      minSize?: string | number;
  }

  • OptionalclassName?: string

    CSS class name.

    ⚠️ Class is applied to nested HTMLDivElement to avoid styles that interfere with Flex layout.

  • OptionalcollapsedSize?: string | number

    Panel size when collapsed; defaults to 0%.

  • Optionalcollapsible?: boolean

    This panel can be collapsed.

    ℹ️ A collapsible panel will collapse when it's size is less than of the specified minSize

  • OptionaldefaultSize?: string | number

    Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.

    ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation.

  • Optionaldisabled?: boolean

    When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).

  • OptionalelementRef?: Ref<null | HTMLDivElement>

    Ref attached to the root HTMLDivElement.

  • OptionalgroupResizeBehavior?: "preserve-relative-size" | "preserve-pixel-size"

    How should this Panel behave if the parent Group is resized? Defaults to preserve-relative-size.

    • preserve-relative-size: Retain the current relative size (as a percentage of the Group)
    • preserve-pixel-size: Retain its current size (in pixels)

    ℹ️ Panel min/max size constraints may impact this behavior.

    ⚠️ A Group must contain at least one Panel with preserve-relative-size resize behavior.

  • Optionalid?: string | number

    Uniquely identifies this panel within the parent group. Falls back to useId when not provided.

    ℹ️ This prop is used to associate persisted group layouts with the original panel.

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

  • OptionalmaxSize?: string | number

    Maximum size of Panel within its parent group; defaults to 100%.

  • OptionalminSize?: string | number

    Minimum size of Panel within its parent group; defaults to 0%.

  • OptionalonResize?: (
        panelSize: PanelSize,
        id: undefined | string | number,
        prevPanelSize: undefined | PanelSize,
    ) => void

    Called when panel sizes change.

  • OptionalpanelRef?: Ref<null | PanelImperativeHandle>

    Exposes the following imperative API:

    • collapse(): void
    • expand(): void
    • getSize(): number
    • isCollapsed(): boolean
    • resize(size: number): void

    ℹ️ The usePanelRef and usePanelCallbackRef hooks are exported for convenience use in TypeScript projects.

  • Optionalstyle?: CSSProperties

    CSS properties.

    ⚠️ Style is applied to nested HTMLDivElement to avoid styles that interfere with Flex layout.

  • OptionalcollapsedSize?: string | number

    From react-resize-panels docs:

    Panel size when collapsed; defaults to 0%.

    If you pass a number, it will be converted to a percentage string (e.g. 39 → "39%"). If you pass a string, it will be interpreted as a CSS size value and passed through as-is (e.g. "200px", "50%", "10rem").

  • OptionaldefaultSize?: string | number

    From react-resize-panels docs:

    Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.

    If you pass a number, it will be converted to a percentage string (e.g. 39 → "39%"). If you pass a string, it will be interpreted as a CSS size value and passed through as-is (e.g. "200px", "50%", "10rem").

  • OptionalmaxSize?: string | number

    From react-resize-panels docs:

    Maximum size of Panel within its parent group; defaults to 100%.

    If you pass a number, it will be converted to a percentage string (e.g. 39 → "39%"). If you pass a string, it will be interpreted as a CSS size value and passed through as-is (e.g. "200px", "50%", "10rem").

  • OptionalminSize?: string | number

    From react-resize-panels docs:

    Minimum size of Panel within its parent group; defaults to 0%.

    If you pass a number, it will be converted to a percentage string (e.g. 39 → "39%"). If you pass a string, it will be interpreted as a CSS size value and passed through as-is (e.g. "200px", "50%", "10rem").