@zendeskgarden/container-splitter/README.md

Containers relating to Splitter in the Garden Design System

# @zendeskgarden/container-splitter [![npm version][npm version badge]][npm version link]

[npm version badge]: https://flat.badgen.net/npm/v/@zendeskgarden/container-splitter
[npm version link]: https://www.npmjs.com/package/@zendeskgarden/container-splitter

This package includes containers relating to Splitter in the
[Garden Design System](https://zendeskgarden.github.io/).

## Installation

```sh
npm install @zendeskgarden/container-splitter
```

## Usage

This container implements the [window
splitter](https://www.w3.org/TR/wai-aria-practices-1.1/#windowsplitter) design
pattern and can be used to build a splitter component. Check out
[storybook](https://zendeskgarden.github.io/react-containers) for live examples.

### useSplitter

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

```jsx
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.

```jsx
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>;
```