useResizer
is a minimal react hook implementation to produce the resize behaviour the resize
CSS property provides but with more control over interactions through custom HTML and CSS code.
Inspiration was drawn from several existing libraries and blog posts to build this hook.
Here is a basic example of using the hook with the east
direction of resizing. The hook takes a HTMLDivElement as a ref and some options as input. The ref object is manipulated to resize an element. Details on the options is provided in the next section.
const resizeRef = useRef<HTMLDivElement>(null);
const { initResize, isResizing, resetSize } = useResizer(resizeRef, {
direction: 'east'
});
...
return (
<div ref={resizeRef} className="resize-pane">
<div
className="resize-bar"
onMouseDown={initResize}
/>
</div>
);
"west" | "east" | "north" | "south" | "south-east"
The direction to resize towards.
number
Optional property to control the step to recalcuate the width and height of the resized element.
number (pixels)
Optional property to set the initial width of the resized element.
number (pixels)
Optional property to set the initial height of the resized element.
number (pixels)
Optional property to set the minimum width of the resized element. The element will not be able to be resized below this width.
number (pixels)
Optional property to set the minimum height of the resized element. The element will not be able to be resized below this height.
number (pixels)
Optional property to set the maximum width of the resized element. The element will not be able to be resized above this width.
number (pixels)
Optional property to set the maximum height of the resized element. The element will not be able to be resized above this height.
Storybook examples are in the src/stories
folder and can be run by npm run storybook
.