Возможно ли глобально хранить размеры реагирующего элемента, используя контекст и ссылки?

Question

Справочная информация: В настоящее время я работаю над проектом реагирования, в который я включил компонент боковой панели для отображения определенного вида контента. Сама боковая панель скользит справа и скользит по существующему контенту на веб-странице. Я использую портал для рендеринга боковой панели в основной контейнер содержимого страницы независимо от того, где находится компонент в React DOM. Боковая панель имеет фиксированное положение, и я до сих пор создал несколько менее элегантных крючков для измерения высоты заголовка страницы, используя vanilla javascript, чтобы боковая панель не закрывала заголовок. Это работает довольно хорошо. Однако теперь дизайнер запросил фиксированную нижнюю строку состояния для отображения ответных сообщений от вызовов API. Чтобы эта строка состояния не закрывала боковую панель, когда она открыта, я хочу использовать Context, чтобы глобально сохранить текущую высоту элемента строки состояния (я предполагаю, что строка состояния отображается в приложении только один раз за раз) , Это, однако, потребовало бы от меня возможности обновить хранилище контекста при изменении размера ссылочного компонента React.

Актуальный вопрос : можно ли заставить ссылку на компонент React вызвать побочный эффект (используя useEffect) при изменении размера компонента или любым другим способом использовать слушатель для ссылки, которая срабатывает при изменении размера компонента? Если нет, то какой другой способ вы бы предложили?

Примечание: Если мои вопросы не имеют смысла или требуют дополнительной информации, не стесняйтесь спрашивать.

Answer 1

Этот хук можно использовать для этого, но зависит от того, какие браузеры вы хотите поддерживать: https://github.com/rehooks/component-size

Вы можете сделать что-то вроде этого:

const ref = useRef(null)
const size = useComponentSize(ref)

React.useEffect(() => {
// do something with size
}, [size]);