Resizable

since 1.0

A container that groups resizable panels together.

Example

Navigation

Content

Details

"use client"

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@strongtie/design-system/resizable"

export function ResizableDefault() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="h-64 w-full rounded-lg border"
    >
      <ResizablePanel defaultSize={30} minSize={20}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-medium">Navigation</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={70} minSize={30}>
        <ResizablePanelGroup direction="vertical">
          <ResizablePanel defaultSize={65}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-medium">Content</span>
            </div>
          </ResizablePanel>
          <ResizableHandle withHandle />
          <ResizablePanel defaultSize={35}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-medium">Details</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Install

import { Resizable } from "@strongtie/design-system/resizable"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

ResizablePanelGroup
ResizablePanel
ResizableHandle

Props

`<ResizablePanelGroup>`

Prop	Type	Default	Description
`defaultLayout`	`Layout`	-	Default layout for the Group. ℹ️ This value allows layouts to be remembered between page reloads. ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes. Refer to the documentation for suggestions on how to minimize the impact of this.
`direction`	`horizontal` \| `vertical`	-
`disableCursor`	`boolean`	-	This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for Panels and Separators in this group.
`disabled`	`boolean`	-	Disable resize functionality.
`elementRef`	`Ref<HTMLDivElement \| null>`	-	Ref attached to the root `HTMLDivElement`.
`groupRef`	`Ref<GroupImperativeHandle \| null>`	-	Exposes the following imperative API: - `getLayout(): Layout` - `setLayout(layout: Layout): void` ℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.
`onLayoutChange`	`((layout: Layout) => void)`	-	Called when the Group's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the `onLayoutChanged` callback instead.
`onLayoutChanged`	`((layout: Layout) => void)`	-	Called after the Group's layout has been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api.
`orientation`	`horizontal` \| `vertical`	-
`resizeTargetMinimumSize`	`{ coarse: number; fine: number; }`	-	Minimum size of the resizable hit target area (either `Separator` or `Panel` edge) This threshold ensures are large enough to avoid mis-clicks. - Coarse inputs (typically a finger on a touchscreen) have reduced accuracy; to ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks. - Fine inputs (typically a mouse) can be smaller ℹ️ Apple interface guidelines suggest `20pt` (`27px`) on desktops and `28pt` (`37px`) for touch devices In practice this seems to be much larger than many of their own applications use though.

`<ResizablePanel>`

Prop	Type	Default	Description
`collapsedSize`	`string \| number`	-	Panel size when collapsed; defaults to 0%.
`collapsible`	`boolean`	-	This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize`
`defaultSize`	`string \| number`	-	Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation.
`disabled`	`boolean`	-	When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).
`elementRef`	`Ref<HTMLDivElement \| null>`	-	Ref attached to the root `HTMLDivElement`.
`groupResizeBehavior`	`preserve-relative-size` \| `preserve-pixel-size`	-	How should this Panel behave if the parent Group is resized? Defaults to `preserve-relative-size`. - `preserve-relative-size`: Retain the current relative size (as a percentage of the Group) - `preserve-pixel-size`: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior.
`maxSize`	`string \| number`	-	Maximum size of Panel within its parent group; defaults to 100%.
`minSize`	`string \| number`	-	Minimum size of Panel within its parent group; defaults to 0%.
`onResize`	`((panelSize: PanelSize, id: string \| number, prevPanelSize: PanelSize) => void) ...`	-	Called when panel sizes change. @param panelSize Panel size (both as a percentage of the parent Group and in pixels) @param id Panel id (if one was provided as a prop) @param prevPanelSize Previous panel size (will be undefined on mount)
`panelRef`	`Ref<PanelImperativeHandle \| null>`	-	Exposes the following imperative API: - `collapse(): void` - `expand(): void` - `getSize(): number` - `isCollapsed(): boolean` - `resize(size: number): void` ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.

`<ResizableHandle>`

Prop	Type	Default	Description
`disabled`	`boolean`	-	When disabled, the separator cannot be used to resize its neighboring panels. ℹ️ The panels may still be resized indirectly (while other panels are being resized). To prevent a panel from being resized at all, it needs to also be disabled.
`disableDoubleClick`	`boolean`	-	When true, double-clicking this `Separator` will not reset its `Panel` to its default size.
`elementRef`	`Ref<HTMLDivElement>`	-	Ref attached to the root `HTMLDivElement`.
`withHandle`	`boolean`	-

Radio Group Scroll Area

On This Page

Example Install Components Props <ResizablePanelGroup><ResizablePanel><ResizableHandle>

Contribute

Resizable

since 1.0

A container that groups resizable panels together.

Example

Navigation

Content

Details

"use client"

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@strongtie/design-system/resizable"

export function ResizableDefault() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="h-64 w-full rounded-lg border"
    >
      <ResizablePanel defaultSize={30} minSize={20}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-medium">Navigation</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={70} minSize={30}>
        <ResizablePanelGroup direction="vertical">
          <ResizablePanel defaultSize={65}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-medium">Content</span>
            </div>
          </ResizablePanel>
          <ResizableHandle withHandle />
          <ResizablePanel defaultSize={35}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-medium">Details</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Install

import { Resizable } from "@strongtie/design-system/resizable"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

ResizablePanelGroup
ResizablePanel
ResizableHandle

Props

`<ResizablePanelGroup>`

Prop	Type	Default	Description
`defaultLayout`	`Layout`	-	Default layout for the Group. ℹ️ This value allows layouts to be remembered between page reloads. ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes. Refer to the documentation for suggestions on how to minimize the impact of this.
`direction`	`horizontal` \| `vertical`	-
`disableCursor`	`boolean`	-	This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for Panels and Separators in this group.
`disabled`	`boolean`	-	Disable resize functionality.
`elementRef`	`Ref<HTMLDivElement \| null>`	-	Ref attached to the root `HTMLDivElement`.
`groupRef`	`Ref<GroupImperativeHandle \| null>`	-	Exposes the following imperative API: - `getLayout(): Layout` - `setLayout(layout: Layout): void` ℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.
`onLayoutChange`	`((layout: Layout) => void)`	-	Called when the Group's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the `onLayoutChanged` callback instead.
`onLayoutChanged`	`((layout: Layout) => void)`	-	Called after the Group's layout has been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api.
`orientation`	`horizontal` \| `vertical`	-
`resizeTargetMinimumSize`	`{ coarse: number; fine: number; }`	-	Minimum size of the resizable hit target area (either `Separator` or `Panel` edge) This threshold ensures are large enough to avoid mis-clicks. - Coarse inputs (typically a finger on a touchscreen) have reduced accuracy; to ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks. - Fine inputs (typically a mouse) can be smaller ℹ️ Apple interface guidelines suggest `20pt` (`27px`) on desktops and `28pt` (`37px`) for touch devices In practice this seems to be much larger than many of their own applications use though.

`<ResizablePanel>`

Prop	Type	Default	Description
`collapsedSize`	`string \| number`	-	Panel size when collapsed; defaults to 0%.
`collapsible`	`boolean`	-	This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize`
`defaultSize`	`string \| number`	-	Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation.
`disabled`	`boolean`	-	When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).
`elementRef`	`Ref<HTMLDivElement \| null>`	-	Ref attached to the root `HTMLDivElement`.
`groupResizeBehavior`	`preserve-relative-size` \| `preserve-pixel-size`	-	How should this Panel behave if the parent Group is resized? Defaults to `preserve-relative-size`. - `preserve-relative-size`: Retain the current relative size (as a percentage of the Group) - `preserve-pixel-size`: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior.
`maxSize`	`string \| number`	-	Maximum size of Panel within its parent group; defaults to 100%.
`minSize`	`string \| number`	-	Minimum size of Panel within its parent group; defaults to 0%.
`onResize`	`((panelSize: PanelSize, id: string \| number, prevPanelSize: PanelSize) => void) ...`	-	Called when panel sizes change. @param panelSize Panel size (both as a percentage of the parent Group and in pixels) @param id Panel id (if one was provided as a prop) @param prevPanelSize Previous panel size (will be undefined on mount)
`panelRef`	`Ref<PanelImperativeHandle \| null>`	-	Exposes the following imperative API: - `collapse(): void` - `expand(): void` - `getSize(): number` - `isCollapsed(): boolean` - `resize(size: number): void` ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.

`<ResizableHandle>`

Prop	Type	Default	Description
`disabled`	`boolean`	-	When disabled, the separator cannot be used to resize its neighboring panels. ℹ️ The panels may still be resized indirectly (while other panels are being resized). To prevent a panel from being resized at all, it needs to also be disabled.
`disableDoubleClick`	`boolean`	-	When true, double-clicking this `Separator` will not reset its `Panel` to its default size.
`elementRef`	`Ref<HTMLDivElement>`	-	Ref attached to the root `HTMLDivElement`.
`withHandle`	`boolean`	-

Radio Group Scroll Area

On This Page

Example Install Components Props <ResizablePanelGroup><ResizablePanel><ResizableHandle>

Contribute