Splitter

Splits an area into resizable panels with a draggable handle between each one. Compose it from Splitter.Panel children; the handle is inserted automatically. Give the Splitter a sized container (it fills 100% height/width).

import { Splitter } from '@jbpark/ui-kit';

<div style={{ height: 256 }}>
  <Splitter>
    <Splitter.Panel defaultSize="30%" minSize="20%">
      Sidebar
    </Splitter.Panel>
    <Splitter.Panel defaultSize="70%" minSize="30%">
      Content
    </Splitter.Panel>
  </Splitter>
</div>;

Sidebar

Content

Separator attributes

handleProps puts your own attributes and handlers on the separators, for example a label for assistive technology or a selector for your CSS. An object applies to every separator. A function receives the separator's index (0 sits between the first and second panel) and returns props for that one. handleProps.className is merged with handleClassName.

<Splitter
  handleProps={index => ({
    id: `editor-handle-${index}`,
    'aria-label': index === 0 ? 'Resize file tree' : 'Resize preview',
    'data-editor-resize-handle': '',
  })}
>
  <Splitter.Panel defaultSize="20%">Files</Splitter.Panel>
  <Splitter.Panel defaultSize="50%">Editor</Splitter.Panel>
  <Splitter.Panel defaultSize="30%">Preview</Splitter.Panel>
</Splitter>

The separator also uses id to identify itself within the group, so give each separator its own id through the function form.

Props

Splitter

Prop	Type	Default
orientation	'horizontal' | 'vertical'	'horizontal'
withHandle	boolean (show the grip on handles)	true
handle	ReactNode (custom handle content)	-
handleClassName	string	-
handleProps	SplitterHandleProps | (index) => SplitterHandleProps	-
onResize	(layout) => void (during drag)	-
onResizeEnd	(layout) => void (drag finished)	-
className	string	-
children	ReactNode (Splitter.Panels)	-

Splitter.Panel

Prop	Type	Default
defaultSize	string | number	-
minSize	string | number	-
maxSize	string | number	-
className	string	-
children	ReactNode	-

Splitter.Panel forwards the rest of the underlying resizable panel props. The handle between adjacent panels is added automatically — you only render the panels.