react-window-splitter

Examples
API Docs
Thanks

Imperative API

All components also come with an imperative API. Each component has a handle prop that you can use to access the component’s API.

NOTE: ref is used to get the element for the component, so the imperative API is not available on the ref prop.

PanelGroup

The PanelGroup component has methods for getting the sizes of the panels and setting the sizes of the panels.

View the full API

import { useRef } from "react";
import {
  Panel,
  PanelGroup,
  PanelGroupHandle,
  PanelResizer,
} from "react-window-splitter";
import { Button } from "@/Components/Button";

export function ImperativeGroupExample() {
  const panelGroupHandle = useRef<PanelGroupHandle>(null);

  return (
    <div className="flex flex-col gap-4">
      <PanelGroup
        orientation="horizontal"
        style={{ height: 200 }}
        handle={panelGroupHandle}
      >
        <Panel color="green" min="50px" max="300px" />
        <PanelResizer />
        <Panel color="red" min="50px" />
      </PanelGroup>
      <Button
        onPress={() => {
          panelGroupHandle.current?.setSizes(["100px", "20px", "80%"]);
        }}
      >
        Override sizes
      </Button>
    </div>
  );
}

Panel

The Panel component has methods getting and setting it’s size as well as collapsing and expanding the panel.

View the full API

import { useRef } from "react";
import {
  Panel,
  PanelGroup,
  PanelHandle,
  PanelResizer,
} from "react-window-splitter";
import { Button } from "@/Components/Button";

export function ImperativeGroupExample() {
  const panelHandle = useRef<PanelHandle>(null);

  return (
    <div className="flex flex-col gap-4">
      <PanelGroup orientation="horizontal" style={{ height: 200 }}>
        <Panel
          handle={panelHandle}
          color="green"
          min="200px"
          max="300px"
          collapsible
          collapsedSize="100px"
        />
        <PanelResizer />
        <Panel color="red" min="50px" />
      </PanelGroup>
      <Button
        onPress={() => {
          panelHandle.current?.collapse();
        }}
      >
        Collapse
      </Button>
    </div>
  );
}