Как получить ширину дисплея устройства с помощью useRef()?

Question

[Black_Fire]

Нужно в зависимости от ширины экрана отображать UI компонент. Думаю с помощью хука получить ширину родительского компонента, так как он занимает всю ширину экрана, и условным рендерингом показывать нужный элемент. Например, если ширина больше определенного значения - показывать, если меньше - не показывать. В примере кода меню надо отобразить в зависимости от того, какая ширина экрана. Как сделать?

import React, { useRef } from 'react';
import { TopHeader, HeaderWrapper } from './Header.style';
import Logo from '../Logo/Logo';
import Menu from '../Menu/Menu';

export default function Header() {
    const ref = useRef();

    return (
        <TopHeader>
            <HeaderWrapper>
                <Logo />
                {ref.current.clientWidth >= 992 && <Menu />}
                </HeaderWrapper>
        </TopHeader>
    )
}

Comments

[Валерий]

Вы можете обойтись медиа выражениями