# ResizablePanelGroup

> Row or column of resizable panels.

Source: https://ui.jcsoftdev.com/docs/components/resizable-panel-group

Row or column of resizable panels. Put a ResizableHandle between every two panels.

## Import

```ts
import { ResizablePanelGroup } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/resizable`.

## Usage

```tsx
export const Default: Story = { render: () => <Demo direction="horizontal" /> };
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `direction` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
| `onLayout` | `((sizes: number[]) => void)` |  | Called with the layout in percent after every change. |
| `children` * | `ReactNode` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-resizable--default)
- [Vertical](/storybook/?path=/story/containers-resizable--vertical)
- [Narrow](/storybook/?path=/story/containers-resizable--narrow)
- [Brutal Preset](/storybook/?path=/story/containers-resizable--brutal-preset)

## Source

`packages/ui/src/containers/resizable/resizable.tsx`