React Portals: Mestring af Modals og Tooltips for en Forbedret Brugeroplevelse

I moderne webudvikling er det altafgørende at skabe intuitive og engagerende brugergrænseflader. React, et populært JavaScript-bibliotek til at bygge brugergrænseflader, tilbyder forskellige værktøjer og teknikker for at opnå dette. Et sådant kraftfuldt værktøj er React Portals. Dette blogindlæg dykker ned i verdenen af React Portals med fokus på deres anvendelse i opbygningen af tilgængelige og visuelt tiltalende modals og tooltips.

Hvad er React Portals?

React Portals tilbyder en måde at rendere en komponents børn ind i en DOM-node, der eksisterer uden for forældrekomponentens DOM-hierarki. Med enklere ord giver det dig mulighed for at bryde fri fra det standard React-komponenttræ og indsætte elementer direkte i en anden del af HTML-strukturen. Dette er især nyttigt i situationer, hvor du har brug for at kontrollere stacking context eller positionere elementer uden for deres forældrecontainers grænser.

Traditionelt renderes React-komponenter som børn af deres forældrekomponenter inden for DOM'en. Dette kan undertiden føre til styling- og layout-udfordringer, især når man arbejder med elementer som modals eller tooltips, der skal vises oven på andet indhold eller positioneres i forhold til viewporten. React Portals giver en løsning ved at lade disse elementer blive renderet direkte i en anden del af DOM-træet og dermed omgå disse begrænsninger.

Hvorfor bruge React Portals?

Flere centrale fordele gør React Portals til et værdifuldt værktøj i din React-udviklingsarsenal:

• Forbedret Styling og Layout: Portals giver dig mulighed for at positionere elementer uden for deres forælders container, hvilket overvinder stylingproblemer forårsaget af overflow: hidden, z-index-begrænsninger eller komplekse layout-restriktioner. Forestil dig en modal, der skal dække hele skærmen, selvom dens forældrecontainer har overflow: hidden sat. Portals giver dig mulighed for at rendere modal'en direkte i body og dermed omgå denne begrænsning.
• Forbedret Tilgængelighed: Portals er afgørende for tilgængelighed, især når det kommer til modals. Ved at rendere modalens indhold direkte i body kan du nemt styre focus trapping, hvilket sikrer, at brugere, der anvender skærmlæsere eller tastaturnavigation, forbliver inden for modal'en, mens den er åben. Dette er essentielt for at levere en problemfri og tilgængelig brugeroplevelse.
• Renere Komponentstruktur: Ved at rendere modal- eller tooltip-indhold uden for hovedkomponenttræet kan du holde din komponentstruktur renere og mere håndterbar. Denne adskillelse af ansvarsområder kan gøre din kode lettere at læse, forstå og vedligeholde.
• Undgå Problemer med Stacking Context: Stacking contexts i CSS kan være notorisk svære at håndtere. Portals hjælper dig med at undgå disse problemer ved at lade dig rendere elementer direkte i roden af DOM'en, hvilket sikrer, at de altid er korrekt positioneret i forhold til andre elementer på siden.

Implementering af Modals med React Portals

Modals er et almindeligt UI-mønster, der bruges til at vise vigtig information eller bede brugere om input. Lad os undersøge, hvordan man opretter en modal ved hjælp af React Portals.

1. Oprettelse af Portal-roden

Først skal du oprette en DOM-node, hvor modal'en skal renderes. Dette gøres typisk ved at tilføje et div-element med et specifikt ID til din HTML-fil (normalt i body):

            <div id="modal-root"></div>
            

              
                Copy
              
            
          

2. Oprettelse af Modal-komponenten

Dernæst skal du oprette en React-komponent, der repræsenterer modal'en. Denne komponent vil indeholde modal'ens indhold og logik.

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Forklaring:

• isOpen prop: Bestemmer, om modal'en er synlig.
• onClose prop: En funktion til at lukke modal'en.
• children prop: Indholdet, der skal vises inde i modal'en.
• modalRoot ref: Refererer til den DOM-node, hvor modal'en vil blive renderet (#modal-root).
• useEffect hook: Sikrer, at modal'en kun renderes, efter at komponenten er mounted, for at undgå problemer med, at portal-roden ikke er tilgængelig med det samme.
• ReactDOM.createPortal: Dette er nøglen til at bruge React Portals. Den tager to argumenter: det React-element, der skal renderes (modalContent), og den DOM-node, hvor det skal renderes (modalRoot.current).
• Klik på overlayet: Lukker modal'en. Vi bruger e.stopPropagation() på modal-content div'en for at forhindre, at klik inde i modal'en lukker den.

3. Brug af Modal-komponenten

Nu kan du bruge Modal-komponenten i din applikation:

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Dette eksempel demonstrerer, hvordan man styrer modal'ens synlighed ved hjælp af isOpen-prop'en og funktionerne openModal og closeModal. Indholdet inden for <Modal>-tags vil blive renderet inde i modal'en.

4. Styling af Modal'en

Tilføj CSS-styles for at positionere og style modal'en. Her er et grundlæggende eksempel:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of other content */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Forklaring af CSS:

• position: fixed: Sikrer, at modal'en dækker hele viewporten, uanset scrolling.
• background-color: rgba(0, 0, 0, 0.5): Skaber et halvgennemsigtigt overlay bag modal'en.
• display: flex, justify-content: center, align-items: center: Centrerer modal'en horisontalt og vertikalt.
• z-index: 1000: Sikrer, at modal'en renderes oven på alle andre elementer på siden.

5. Overvejelser om Tilgængelighed for Modals

Tilgængelighed er afgørende, når man implementerer modals. Her er nogle vigtige overvejelser:

• Fokushåndtering: Når modal'en åbnes, skal fokus automatisk flyttes til et element inde i modal'en (f.eks. det første inputfelt eller en lukkeknap). Når modal'en lukkes, skal fokus vende tilbage til det element, der udløste åbningen af modal'en. Dette opnås ofte ved hjælp af Reacts useRef-hook til at gemme det tidligere fokuserede element.
• Tastaturnavigation: Sørg for, at brugere kan navigere i modal'en ved hjælp af tastaturet (Tab-tasten). Fokus skal være fanget inde i modal'en, hvilket forhindrer brugere i ved et uheld at tabbe ud af den. Biblioteker som react-focus-lock kan hjælpe med dette.
• ARIA-attributter: Brug ARIA-attributter til at give semantisk information om modal'en til skærmlæsere. Brug f.eks. aria-modal="true" på modal-containeren og aria-label eller aria-labelledby til at give en beskrivende etiket til modal'en.
• Lukkemekanisme: Sørg for flere måder at lukke modal'en på, såsom en lukkeknap, at klikke på overlayet eller at trykke på Escape-tasten.

Eksempel på Fokushåndtering (ved hjælp af useRef):

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- First focusable element -->
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Forklaring af Fokushåndteringskoden:

• previouslyFocusedElement.current: Gemmer det element, der havde fokus, før modal'en blev åbnet.
• firstFocusableElement.current: Refererer til det første fokuserbare element *inde i* modal'en (i dette eksempel et tekstinput).
• Når modal'en åbnes (isOpen er sand):
  • Det aktuelt fokuserede element gemmes.
  • Fokus flyttes til firstFocusableElement.current.
  • En event listener tilføjes for at lytte efter Escape-tasten, som lukker modal'en.
• Når modal'en lukkes (oprydningsfunktion):
  • Event listeneren for Escape-tasten fjernes.
  • Fokus returneres til det element, der tidligere var fokuseret.

Implementering af Tooltips med React Portals

Tooltips er små, informative popups, der vises, når en bruger holder musen over et element. React Portals kan bruges til at oprette tooltips, der er korrekt positioneret, uanset forældreelementets styling eller layout.

1. Oprettelse af Portal-roden (hvis den ikke allerede er oprettet)

Hvis du ikke allerede har oprettet en portal-rod til modals, skal du tilføje et div-element med et specifikt ID til din HTML-fil (normalt i body):

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

2. Oprettelse af Tooltip-komponenten

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px spacing
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

Forklaring:

• text prop: Teksten, der skal vises i tooltip'en.
• children prop: Elementet, der udløser tooltip'en (det element, brugeren holder musen over).
• position prop: Positionen af tooltip'en i forhold til udløserelementet ('top', 'bottom', 'left', 'right'). Standard er 'top'.
• isVisible state: Styrer synligheden af tooltip'en.
• tooltipRoot ref: Refererer til den DOM-node, hvor tooltip'en vil blive renderet (#tooltip-root).
• tooltipRef ref: Refererer til selve tooltip-elementet, brugt til at beregne dets dimensioner.
• triggerRef ref: Refererer til det element, der udløser tooltip'en (children).
• handleMouseEnter og handleMouseLeave: Event handlers for at holde musen over udløserelementet.
• updatePosition: Beregner den korrekte position af tooltip'en baseret på position-prop'en og dimensionerne af udløser- og tooltip-elementerne. Den bruger getBoundingClientRect() til at få position og dimensioner af elementerne i forhold til viewporten.
• ReactDOM.createPortal: Renderer tooltip-indholdet i tooltipRoot.

3. Brug af Tooltip-komponenten

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Hover over this <Tooltip text="This is a tooltip!
With multiple lines."
position="bottom">text</Tooltip> to see a tooltip.
      </p>

      <button>
        Hover <Tooltip text="Button tooltip" position="top">here</Tooltip> for tooltip.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Dette eksempel viser, hvordan man bruger Tooltip-komponenten til at tilføje tooltips til tekst og knapper. Du kan tilpasse tooltip'ens tekst og position ved hjælp af text- og position-props.

4. Styling af Tooltip'en

Tilføj CSS-styles for at positionere og style tooltip'en. Her er et grundlæggende eksempel:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Dark background */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Ensure it's on top of other content */
  white-space: pre-line; /* Respect line breaks in the text prop */
}

            

              
                Copy
              
            
          

Forklaring af CSS:

• position: absolute: Positionerer tooltip'en i forhold til tooltip-root. Funktionen updatePosition i React-komponenten beregner de præcise top- og left-værdier for at positionere tooltip'en nær udløserelementet.
• background-color: rgba(0, 0, 0, 0.8): Skaber en let gennemsigtig mørk baggrund for tooltip'en.
• white-space: pre-line: Dette er vigtigt for at bevare linjeskift, som du måtte inkludere i text-prop'en. Uden dette ville tooltip-teksten blive vist på en enkelt linje.

Globale Overvejelser og Bedste Praksis

Når du udvikler React-applikationer til et globalt publikum, bør du overveje disse bedste praksisser:

• Internationalisering (i18n): Brug et bibliotek som react-i18next eller FormatJS til at håndtere oversættelser og lokalisering. Dette giver dig mulighed for nemt at tilpasse din applikation til forskellige sprog og regioner. For modals og tooltips, sørg for at tekstindholdet er korrekt oversat.
• Højre-til-venstre (RTL) Support: For sprog, der læses fra højre til venstre (f.eks. arabisk, hebraisk), skal du sikre, at dine modals og tooltips vises korrekt. Du skal muligvis justere positionering og styling af elementer for at imødekomme RTL-layouts. CSS logiske egenskaber (f.eks. margin-inline-start i stedet for margin-left) kan være nyttige.
• Kulturel Følsomhed: Vær opmærksom på kulturelle forskelle, når du designer dine modals og tooltips. Undgå at bruge billeder eller symboler, der kan være stødende eller upassende i visse kulturer.
• Tidszoner og Datoformater: Hvis dine modals eller tooltips viser datoer eller tidspunkter, skal du sikre, at de formateres i henhold til brugerens lokalitet og tidszone. Biblioteker som moment.js (selvom det er forældet, stadig meget brugt) eller date-fns kan hjælpe med dette.
• Tilgængelighed for Forskellige Evner: Følg retningslinjerne for tilgængelighed (WCAG) for at sikre, at dine modals og tooltips kan bruges af personer med handicap. Dette inkluderer at levere alternativ tekst til billeder, sikre tilstrækkelig farvekontrast og understøtte tastaturnavigation.

Konklusion

React Portals er et kraftfuldt værktøj til at bygge fleksible og tilgængelige brugergrænseflader. Ved at forstå, hvordan man bruger dem effektivt, kan du skabe modals og tooltips, der forbedrer brugeroplevelsen og forbedrer strukturen og vedligeholdeligheden af dine React-applikationer. Husk at prioritere tilgængelighed og globale overvejelser, når du udvikler til et mangfoldigt publikum, og sørg for, at dine applikationer er inkluderende og brugbare for alle.

Videre Læsning

• React Portals Dokumentation
• Retningslinjer for Tilgængeligt Webindhold (WCAG)
• react-i18next