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.
- Beta
Get Pro
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#
<ResizeBoxwidth="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.
<ResizeBoxwidth="280px"height="200px"minWidth="100px"maxWidth="300px"borderRightWidth="1px"bg="blackAlpha.300"/>
Disable resizing#
Use the isResizable
to disable resizing.
<ResizeBoxwidth="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"><ResizeBoxposition="absolute"right="0"width="280px"height="200px"borderLeftWidth="1px"bg="blackAlpha.300"handlePosition="left"/></Box>
With content#
<ResizeBoxwidth="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 musttruly get to know your customers and build something for them.β</Text><Text size="sm" color="muted">β Marc Benioff</Text></ResizeBox>
Was this helpful?