useResize
Respond to resize changes for an element.
An efficient way to listen to changes in the layout of an element. (This hook is implemented with ResizeObserver
.)
import { useResize } from 'react-gui/use-resize';
const ref = useResize(resizeProps);
API #
Return value #
useResize
returns a React callback ref.
A callback ref that must be passed to the target element.
ResizeProps #
The default is set to border-box
, with the option to use content-box
instead.
Called when the element resizes.
ResizeEntry #
The length of the observed element’s box in the block dimension (i.e., the height).
The length of the observed element’s box in the inline dimension (i.e., the width).
Browser compatibility. To use this hook in browsers that don’t have ResizeObserver support, you will need to include a ResizeObserver polyfill.
Examples #
import useResize from 'react-gui/use-resize';
const ref = useResize({
box: 'content-box',
onResize({ blockSize, inlineSize }) {
// ...
}
});
This hook can be used to create “element queries” that re-render the component when specific layout conditions are met.
import useResize from 'react-gui/use-resize';
function useMinWidth(minWidth: number) {
const [bool, setBool] = React.useState(false);
const ref = useResize({
onResize({ inlineSize }) {
setBool(inlineSize >= minWidth)
}
});
return [ref, bool];
}