React TypeScript - Bootstrap Navbar Höhe abfragen mit useRef-Hook

Wenn die Bootstrap Navigation angezeigt wird, verdeckt sie mit ihrer Fläche ein Teil der darunter liegenden Seite. Möchte man es verhindern und die Seite anschliessend an die Navigation anzeigen, muss der Seite ein margin-top, margin-left, margin-right oder margin-bottom Wert, je nach dem wo die Navigation platziert ist, hinzugefügt werden. Der Wert soll der Höhe bzw. Breite der Navigation entsprechen. Aber wie kommt man an den aktuellen Wert? Die Lösung liefert der React useRef-Hook.

Zuerst wird in der übergeordneten Komponente, die die Navbar rendert der useRef-Hook und MutableRefObject importiert. Der useEffect-Hook wird hier benötigt um die aktuelle Größe der Navigation nach jedem Update der Komponente abzufragen.

import React, { useEffect, useRef, MutableRefObject } from 'react';

In der Komponenten-Definition eine Referenz-Konstante deklarieren.

const navbarRef: MutableRefObject<any> = useRef();

In der Komponenten-Render-Funktion wird der Navbar die Referenz hinzugefügt:

<Navbar ref={navbarRef} ...>
...
</Navbar>

Jetzt kann beim jeden Update der Parent-Komponente die aktuelle Höhe oder Breite der Navbar abgefragt werden.

useEffect(() => {
    if (navbarRef.current){
      console.log("Navbar height: " + navbarRef.current.clientHeight + 
                  ", Navbar width: " + navbarRef.current.clientWidth);
    }
  }, []);

Tipp: Mit Redux, Local oder Session Storage könne die Werte allen WebApp-Komponenten zur Verfügung gestellt werden.