ResizeObserverで要素のサイズ変更を監視するフック
refRefObject<T | null>callback(entry: ResizeObserverEntry) => voidoptions.enabledbooleantrue| Prop | Type | Default |
|---|---|---|
ref | RefObject<T | null> | - |
callback | (entry: ResizeObserverEntry) => void | - |
options.enabled | boolean | true |
voidvoid| Prop | Type | Default |
|---|---|---|
void | void | - |
import { useResize } from '@k8ordo/ui';const [size, setSize] = useState({ width: 0, height: 0 });
const ref = useRef<HTMLDivElement>(null);
useResize(ref, (entry) => {
const { width, height } = entry.contentRect;
setSize({ width, height });
});
return (
<div ref={ref}>
<p>Width: {size.width}px</p>
<p>Height: {size.height}px</p>
</div>
);