react-pre-hooksuseResizeObserver
Handle the ResizeObserver using this hook.
Parameters
- the ResizeObserver callback function.
- the ResizeObserver options, as well as the
refobject of the target element.
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| observer | RefObject | the ResizeObserver object reference. |
Example Usage
TIP
Just use useSize if you want to get an element size in a state.
tsx
import { useResizeObserver } from 'react-pre-hooks';
export default function Example() {
const { ref } = useResizeObserver(entries => {
const { width, height } = entries[0].contentRect;
console.log({ width, height });
});
return (
<main>
<div ref={ref}>Resize the window!</div>
</main>
);
}import { useResizeObserver } from 'react-pre-hooks';
export default function Example() {
const { ref } = useResizeObserver(entries => {
const { width, height } = entries[0].contentRect;
console.log({ width, height });
});
return (
<main>
<div ref={ref}>Resize the window!</div>
</main>
);
}