Variable ResizablePane`Const`

ResizablePane: any = ...

A split-pane container with a draggable splitter, supporting both horizontal and vertical layouts.

The pane can be either:

Controlled via the position prop (number between min and max), or
Uncontrolled via defaultPosition (used as the initial position).

Layout behavior:

mode="horizontal": the position controls the width of the left pane.
mode="vertical": the position controls the height of the top pane.

Ref API:

Exposes imperative methods on ref.current:
- getMode() to get the current mode
- setMode(mode) to switch between "horizontal" and "vertical"
- getPosition() to get the current splitter position
- setPosition(position) to update the splitter position

Events:

Calls onSizeChange(position) whenever the pane size/position changes (e.g., via dragging).

Rendering:

Renders children into two separate containers (no portals).

Param: mode

Split direction: "horizontal" or "vertical". Defaults to "horizontal".

Param: position

Controlled splitter position. Normalized value within [min, max]. If provided, the component uses this value instead of internal state.

Param: defaultPosition

Initial splitter position for uncontrolled usage. Defaults to 0.5.

Param: min

Minimum allowed position. Defaults to 0.1.

Param: max

Maximum allowed position. Defaults to 0.9.

Param: splitterSize

Thickness of the draggable splitter in pixels. Defaults to 8.

Param: onSizeChange

Callback invoked when the position changes. Receives the new normalized position.

Param: style

Optional root container styles.

Param: className

Optional root container CSS class.

Param: leftPaneStyle

Optional styles applied to the left pane (or top pane in vertical mode).

Param: rightPaneStyle

Optional styles applied to the right pane (or bottom pane in vertical mode).

Param: splitterStyle

Optional styles applied to the splitter element.

Param: children

React children to be rendered into the two pane containers.

Example

const ref = useRef<ResizablePaneHandle>(null);

<ResizablePane
  ref={ref}
  mode="horizontal"
  defaultPosition={0.5}
  min={0.1}
  max={0.9}
  onSizeChange={(pos) => console.log(pos)}
>
  <div /> <div />
</ResizablePane>