mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fix resizeobserver loop
This commit is contained in:
parent
00ec92cc02
commit
5598f49c32
6 changed files with 103 additions and 18 deletions
25
src/hooks/useElementSize.ts
Normal file
25
src/hooks/useElementSize.ts
Normal file
|
@ -0,0 +1,25 @@
|
|||
import { MutableRefObject, useLayoutEffect, useRef, useState } from 'react';
|
||||
import useResizeObserver from '@react-hook/resize-observer';
|
||||
|
||||
interface Size {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export default function useElementSize<
|
||||
T extends HTMLElement = HTMLDivElement
|
||||
>(): [MutableRefObject<T | null>, Size] {
|
||||
const target = useRef<T | null>(null);
|
||||
const [size, setSize] = useState<Size>({
|
||||
width: 0,
|
||||
height: 0
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
target.current && setSize(target.current.getBoundingClientRect());
|
||||
}, [target]);
|
||||
|
||||
useResizeObserver(target, (entry) => setSize(entry.contentRect));
|
||||
|
||||
return [target, size];
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue