Come realizzare un dropdown in React

Che cosa realizzeremo in questo progetto ?

Partiremo creando una normale navbar full responsive che da mobile mostrerà i link navigabili all'interno di un dropdown menù, ovvero un menu collassabile.

Di che cosa avremmo bisogno ?

• useState: useremo un solo state per tenere traccia dell'aperture e della chiusura del nostro dropdown.

  const [show, setShow] = useState(false);

• useRef: Ci permetterà di targettizzare il nostro menù ed il suo container e di gestire le proprietà del nostro dropdown in modo dinamico dinamico.

  const linkContainerRef = useRef(null);
  const linkListRef = useRef(null);

-useEffect: Lo useremo per aprire e chiudere il nostro dropdown

Che cosa è lo useRef Hook

useRef restituisce un oggetto mutabile la cui proprietà .current è inizializzata sull'argomento passato (initialValue). L'oggetto restituito persisterà per l'intera durata del componente.

Quindi non ci resta che assegnare far "assegnare" i nostri oggetti ref:

 <div
        className={`${show ? "links-container show" : "links-container"}`}
        ref={linkContainerRef}
      >
        <ul className="nav-links" ref={linkListRef}>
          {links.map((el) => (
            <li key={el.id}>
              <a href={el.url} alt={el.text}>
                {el.text}
              </a>
            </li>
          ))}
        </ul>
      </div>

Esempio di utilizzo dello useRef Hook

Abbiamo visto che il nostro useRef ritorna un oggetto nel quale alla chiave current troviamo l'Element del DOM del componente al quale abbiamo passato il nostro ref.

Nel nostro case abbiamo due useRef, uno per il container della nostra nav-links e l'altro per la nostra nav-links. Il nostro obiettivo è quello di definire l'altezza del container in modo che sia dinamica rispetto al numero di elementi presenti in nav-links.

 useEffect(() => {
    const linkListHeight = linkListRef.current.getBoundingClientRect().height;
    if (show) {
      linkContainerRef.current.style.height = `${linkListHeight}px`;
    } else {
      linkContainerRef.current.style.height = "0px";
    }
  }, [show]);

Quando lo state di show, che sarà modificato al click dell'elemento che vogliamo che apra il nostro menu, andremo a prendere l'altezza della nostra lista di link andremo a settarla sul nostro container.