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.

ref (?HTMLElement) => void

A callback ref that must be passed to the target element.

ResizeProps #

box ?("border-box" | "context-box")

The default is set to border-box, with the option to use content-box instead.

onResize ?(layout: ResizeEntry) => void

Called when the element resizes.

ResizeEntry #

blockSize number

The length of the observed element’s box in the block dimension (i.e., the height).

inlineSize number

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];
}
Updated
Edit
React GUICopyright © Facebook Inc.