ResizeBox

Utility hook and component to create resizable panels.

ResizeBox is used for creating resizable sidebar panels, it currently only supports resizing the X axis.

Import#

  • ResizeBox: Resizable Box component.
  • ResizeHandle: The resize handle.
  • useResize: Hook that returns prop getters for low-level integration.
import { ResizeBox, ResizeHandle, useResize } from '@saas-ui/pro'

Usage#

ResizeBox behaves just like a Box component and can be used as a container component.

Basic setup#

<ResizeBox
  width="280px"
  height="200px"
  borderRightWidth="1px"
  bg="blackAlpha.300"
/>

Min and Max Width#

The minWidth and maxWidth properties can be used to limit the range of the resizer.

<ResizeBox
  width="280px"
  height="200px"
  minWidth="100px"
  maxWidth="300px"
  borderRightWidth="1px"
  bg="blackAlpha.300"
/>

Disable resizing#

Use the isResizable to disable resizing.

<ResizeBox
  width="280px"
  height="200px"
  borderRightWidth="1px"
  bg="blackAlpha.300"
  isResizable={false}
/>

Handle position#

The handle can be positioned either right or left side of the container.

<Box position="relative" height="200px">
  <ResizeBox
    position="absolute"
    right="0"
    width="280px"
    height="200px"
    borderLeftWidth="1px"
    bg="blackAlpha.300"
    handlePosition="left"
  />
</Box>

With content#

<ResizeBox
  width="280px"
  minWidth="200px"
  height="200px"
  borderRightWidth="1px"
  bg="blackAlpha.300"
  padding="4"
>
  <Text>
    “Most of all, I discovered that in order to succeed with a product you must
    truly get to know your customers and build something for them.”
  </Text>
  <Text size="sm" color="muted">
    – Marc Benioff
  </Text>
</ResizeBox>

Was this helpful?