splitter

@zendeskgarden/container-splitter

This package includes containers relating to Splitter in the Garden Design System.

Installation

npm install @zendeskgarden/container-splitter

Usage

This container implements the window splitter design pattern and can be used to build a splitter component. Check out storybook for live examples.

useSplitter

The useSplitter hook manages positioning and required accessibility attributes for the window splitting separator.

import {
  useSplitter,
  SplitterType,
  SplitterOrientation,
  SplitterPosition
} from '@zendeskgarden/container-splitter';

const Splitter = () => {
  const { getSeparatorProps, getPrimaryPaneProps, valueNow } = useSplitter({
    label: 'primary-pane',
    type: SplitterType.VARIABLE,
    orientation: SplitterOrientation.VERTICAL,
    min: 50,
    max: 100,
    position: SplitterPosition.TRAILS,
    environment: window
  });

  const separatorProps = getSeparatorProps();
  const primaryPaneProps = getPrimaryPaneProps();

  return (
    <div style={{ display: 'flex' }}>
      <div {...primaryPaneProps} style={{ flex: `0 0 ${valueNow}px` }}>
        <p>Primary Pane</p>
      </div>
      <div style={{ flex: '0 0 5px' }} {...separatorProps} />
      <div style={{ flex: '1 1 auto' }}>
        <p>Secondary Pane</p>
      </div>
    </div>
  );
};

SplitterContainer

SplitterContainer is a render-prop wrapper for the useSplitter hook.

import {
  SplitterContainer,
  SplitterType,
  SplitterOrientation,
  SplitterPosition
} from '@zendeskgarden/container-splitter';

<SplitterContainer
  label="primary-pane"
  type={SplitterType.VARIABLE}
  orientation={SplitterOrientation.VERTICAL}
  min={50}
  max={100}
  position={SplitterPosition.TRAILS}
  environment={window}
>
  {({ getSeparatorProps, getPrimaryPaneProps, valueNow }) => {
    const separatorProps = getSeparatorProps();
    const primaryPaneProps = getPrimaryPaneProps();

    return (
      <div id="container" style={{ display: 'flex' }}>
        <div {...primaryPaneProps} style={{ flex: `0 0 ${valueNow}px` }}>
          <p>Primary Pane</p>
        </div>
        <div style={{ flex: '0 0 5px' }} {...separatorProps} />
        <div style={{ flex: '1 1 auto' }}>
          <p>Secondary Pane</p>
        </div>
      </div>
    );
  }}
</SplitterContainer>;