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.

 


Anzeige

 

War dieser Beitrag für dich informativ? Hat er dir gefallen oder geholfen?

Dann unterstütze die Weiterentwicklung dieser Webseite mit einer kleinen Spende!

Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.