import * as React from 'react' ; function useSize ( element ) { const [ size , setSize ] = React . useState < { width : number ; height : number ; } | undefined > ( undefined ) ; React . useEffect ( ( ) => { if ( element ) { const resizeObserver = new ResizeObserver ( ( entries ) => { if ( ! Array . isArray ( entries ) ) { return ; } if ( ! entries . length ) { return ; } const entry = entries [ 0 ] ; let width ; let height ; if ( 'borderBoxSize' in entry ) { const borderSizeEntry = entry [ 'borderBoxSize' ] ; const borderSize = Array . isArray ( borderSizeEntry ) ? borderSizeEntry [ 0 ] : borderSizeEntry ; width = borderSize [ 'inlineSize' ] ; height = borderSize [ 'blockSize' ] ; } else { const rect = element . getBoundingClientRect ( ) ; width = rect . width ; height = rect . height ; } setSize ( { width , height } ) ; } ) ; resizeObserver . observe ( element , { box : 'border-box' } ) ; return ( ) => { setSize ( undefined ) ; resizeObserver . unobserve ( element ) ; } ; } return ; } , [ element ] ) ; return size ; } export { useSize } ;