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
Buy Pro
- 0.37.0 (latest)
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/react'
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>
Custom
import { Box } from '@chakra-ui/react'import { ResizeHandle, useResize } from '@saas-ui-pro/react'export default function Custom() {const { getContainerProps, getHandleProps } = useResize({onHandleClick: (e: any) => {alert('Resize handle clicked')},})return (<Box{...getContainerProps()}position="relative"bg="blackAlpha.200"borderRightWidth="1px"width="200px"height="200px"><ResizeHandle{...getHandleProps()}_after={{content: '""',position: 'absolute',top: '0',bottom: '0',left: '4px',width: '2px',bg: 'primary.500',transitionProperty: 'opacity',transitionDuration: 'normal',opacity: 0,}}_hover={{_after: {opacity: 1,},}}/></Box>)}
Was this helpful?