react-window-splitter

Static at rest

The default behavior of the window splitter is represent the panel widths as percentages of the available space. Notice in the following example that as you resize the window, all the panels scale proportionally.

This is desired for most use cases, but you can also use the isStaticAtRest prop to make the panel width pixel-based. This means when the user resizes the window or container, the panel will stay the same size.

import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";

function StaticAtRestExample() {
  return (
    <PanelGroup>
      <Panel min="80px" max="200px" isStaticAtRest />
      <PanelResizer />
      <Panel min="130px" />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}