import React from 'react' ; import ResizeObserver from 'resize-observer-polyfill' ; see https see https returns example function useResizeObserver < T extends HTMLElement > ( ) { const [ entry , setEntry ] = React . useState ( { contentRect : { } } ) ; const [ node , setNode ] = React . useState ( null ) ; const observer = React . useRef ( null ) ; const disconnect = React . useCallback ( ( ) => { const { current } = observer ; current && current . disconnect ( ) ; } , [ ] ) ; const observe = React . useCallback ( ( ) => { observer . current = new ResizeObserver ( ( [ entry ] ) => setEntry ( entry ) ) ; node && observer . current . observe ( node ) ; } , [ node ] ) ; React . useLayoutEffect ( ( ) => { observe ( ) ; return ( ) => disconnect ( ) ; } , [ disconnect , observe ] ) ; return [ setNode , entry ] ; } export default useResizeObserver ;