import { RefObject , useEffect , useState , useRef } from 'react' ; import { convertRemToPx } from './common' ; param containerRef export const useContainerWidth = ( containerRef ) : number => { const [ width , setWidth ] = useState ( 0 ) ; const observer = useRef ( new ResizeObserver ( ( entries ) => { const { width } = entries [ 0 ] . contentRect ; setWidth ( width ) ; } ) ) ; useEffect ( ( ) => { if ( containerRef . current ) { observer . current . observe ( containerRef . current ) ; } const currentObserver = observer . current ; return ( ) => { currentObserver . disconnect ( ) ; } ; } , [ containerRef , observer ] ) ; return width ; } ; const NARROW_WIDTH_REM = 30 ; param containerWidthRem returns export const isNarrowWidth = ( containerWidthRem ) : boolean => containerWidthRem <= convertRemToPx ( NARROW_WIDTH_REM ) ;