React Portálok: Modálok és tooltip-ek mesterfokon a jobb felhasználói élményért

A modern webfejlesztésben az intuitív és lebilincselő felhasználói felületek készítése kiemelkedően fontos. A React, egy népszerű JavaScript könyvtár a felhasználói felületek építéséhez, számos eszközt és technikát kínál ennek eléréséhez. Az egyik ilyen hatékony eszköz a React Portals. Ez a blogbejegyzés bemutatja a React Portálok világát, különös tekintettel az akadálymentes és vizuálisan tetszetős modálok és tooltip-ek készítésében való alkalmazásukra.

Mik azok a React Portálok?

A React Portálok lehetővé teszik, hogy egy komponens gyermekeit egy olyan DOM csomópontba rendereljük, amely a szülő komponens DOM hierarchiáján kívül létezik. Egyszerűbben fogalmazva, lehetővé teszi, hogy kitörjön a szabványos React komponensfából, és elemeket közvetlenül a HTML struktúra egy másik részébe illesszen be. Ez különösen hasznos olyan helyzetekben, amikor a stacking context-et kell szabályoznia, vagy elemeket a szülő tárolójuk határain kívül kell elhelyeznie.

Hagyományosan a React komponensek a szülő komponenseik gyermekeiként renderelődnek a DOM-ban. Ez néha stílus- és elrendezési kihívásokhoz vezethet, különösen olyan elemek esetében, mint a modálok vagy tooltip-ek, amelyeknek más tartalom felett kell megjelenniük, vagy a viewport-hoz képest kell pozicionálni őket. A React Portálok megoldást nyújtanak erre azáltal, hogy lehetővé teszik ezen elemek közvetlen renderelését a DOM fa egy másik részébe, megkerülve ezeket a korlátokat.

Miért használjunk React Portálokat?

Számos kulcsfontosságú előny teszi a React Portálokat értékes eszközzé a React fejlesztői eszköztárában:

• Javított stílus és elrendezés: A portálok lehetővé teszik az elemek pozicionálását a szülő tárolóján kívül, leküzdve az overflow: hidden, a z-index korlátozások vagy a bonyolult elrendezési megkötések okozta stílusproblémákat. Képzeljen el egy modált, amelynek az egész képernyőt le kell fednie, még akkor is, ha a szülő tárolóján overflow: hidden van beállítva. A portálok lehetővé teszik a modál közvetlen renderelését a body-ba, megkerülve ezt a korlátozást.
• Fokozott akadálymentesítés: A portálok kulcsfontosságúak az akadálymentesítés szempontjából, különösen a modálok esetében. A modál tartalmának közvetlen renderelése a body-ba lehetővé teszi a fókuszcsapdázás egyszerű kezelését, biztosítva, hogy a képernyőolvasót vagy billentyűzetes navigációt használó felhasználók a modálon belül maradjanak, amíg az nyitva van. Ez elengedhetetlen a zökkenőmentes és akadálymentes felhasználói élmény biztosításához.
• Tisztább komponensstruktúra: A modál vagy tooltip tartalmának a fő komponensfán kívüli renderelésével a komponensstruktúrája tisztább és könnyebben kezelhető maradhat. Ez a felelősségi körök szétválasztása olvashatóbbá, érthetőbbé és karbantarthatóbbá teheti a kódot.
• Stacking context problémák elkerülése: A CSS stacking context-ek kezelése közismerten nehéz lehet. A portálok segítenek elkerülni ezeket a problémákat azáltal, hogy lehetővé teszik az elemek közvetlen renderelését a DOM gyökerébe, biztosítva, hogy mindig helyesen legyenek pozicionálva az oldal többi eleméhez képest.

Modálok implementálása React Portálokkal

A modálok egy gyakori UI minta, amelyet fontos információk megjelenítésére vagy felhasználói bevitel kérésére használnak. Nézzük meg, hogyan hozhatunk létre egy modált React Portálok segítségével.

1. A portál gyökér létrehozása

Először is létre kell hoznia egy DOM csomópontot, ahová a modál renderelődni fog. Ezt általában egy div elem hozzáadásával tesszük meg egyedi ID-val a HTML fájlunkban (általában a body-ban):

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

              
                Copy
              
            
          

2. A modál komponens létrehozása

Ezután hozzon létre egy React komponenst, amely a modált képviseli. Ez a komponens tartalmazza a modál tartalmát és logikáját.

            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
              
            
          

Magyarázat:

• isOpen prop: Meghatározza, hogy a modál látható-e.
• onClose prop: Egy funkció a modál bezárásához.
• children prop: A modálban megjelenítendő tartalom.
• modalRoot ref: Hivatkozik arra a DOM csomópontra, ahová a modál renderelődni fog (#modal-root).
• useEffect hook: Biztosítja, hogy a modál csak a komponens mountolása után renderelődjön, elkerülve azokat a problémákat, amelyek abból adódhatnak, hogy a portál gyökere nem érhető el azonnal.
• ReactDOM.createPortal: Ez a kulcsa a React Portálok használatának. Két argumentumot vesz fel: a renderelendő React elemet (modalContent) és a DOM csomópontot, ahová renderelni kell (modalRoot.current).
• Az overlay-re kattintás: Bezárja a modált. Az e.stopPropagation() használatával a modal-content div-en megakadályozzuk, hogy a modálon belüli kattintások bezárják azt.

3. A modál komponens használata

Most már használhatja a Modal komponenst az alkalmazásában:

            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
              
            
          

Ez a példa bemutatja, hogyan lehet szabályozni a modál láthatóságát az isOpen prop és az openModal és closeModal függvények segítségével. A <Modal> tagek közötti tartalom a modál belsejében fog megjelenni.

4. A modál stílusozása

Adjon hozzá CSS stílusokat a modál pozicionálásához és stílusozásához. Itt egy alapvető példa:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Félátlátszó háttér */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Biztosítja, hogy más tartalom felett legyen */
}

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

            

              
                Copy
              
            
          

A CSS magyarázata:

• position: fixed: Biztosítja, hogy a modál az egész viewportot lefedje, görgetéstől függetlenül.
• background-color: rgba(0, 0, 0, 0.5): Létrehoz egy félátlátszó réteget a modál mögött.
• display: flex, justify-content: center, align-items: center: Vízszintesen és függőlegesen középre igazítja a modált.
• z-index: 1000: Biztosítja, hogy a modál az oldal összes többi eleme felett jelenjen meg.

5. Akadálymentesítési szempontok modálok esetén

Az akadálymentesítés kulcsfontosságú a modálok implementálásakor. Íme néhány fontos szempont:

• Fókuszkezelés: Amikor a modál megnyílik, a fókuszt automatikusan egy elemen belülre kell helyezni (pl. az első beviteli mezőre vagy egy bezárás gombra). Amikor a modál bezárul, a fókusznak vissza kell térnie arra az elemre, amely a modál megnyitását kiváltotta. Ezt gyakran a React useRef hookjával érik el, hogy eltárolják az előzőleg fókuszált elemet.
• Billentyűzetes navigáció: Biztosítsa, hogy a felhasználók navigálhassanak a modálban a billentyűzet (Tab billentyű) segítségével. A fókuszt csapdába kell ejteni a modálon belül, megakadályozva, hogy a felhasználók véletlenül kitaboljanak belőle. Ebben segíthetnek olyan könyvtárak, mint a react-focus-lock.
• ARIA attribútumok: Használjon ARIA attribútumokat, hogy szemantikai információt nyújtson a modálról a képernyőolvasóknak. Például használja az aria-modal="true"-t a modál konténeren és az aria-label-t vagy aria-labelledby-t, hogy leíró címkét adjon a modálnak.
• Bezárási mechanizmus: Biztosítson többféle módot a modál bezárására, mint például egy bezárás gomb, az overlay-re kattintás vagy az Escape billentyű lenyomása.

Példa a fókuszkezelésre (useRef használatával):

            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
              
            
          

A fókuszkezelő kód magyarázata:

• previouslyFocusedElement.current: Eltárolja azt az elemet, amelyen a fókusz volt a modál megnyitása előtt.
• firstFocusableElement.current: Hivatkozik az első fókuszálható elemre a modál *belül* (ebben a példában egy szöveges beviteli mezőre).
• Amikor a modál megnyílik (isOpen igaz):
  • Az aktuálisan fókuszált elem eltárolásra kerül.
  • A fókusz átkerül a firstFocusableElement.current-re.
  • Eseményfigyelő kerül hozzáadásra, hogy figyelje az Escape billentyűt, ami bezárja a modált.
• Amikor a modál bezárul (cleanup funkció):
  • Az Escape billentyű eseményfigyelője eltávolításra kerül.
  • A fókusz visszakerül arra az elemre, amelyen korábban volt.

Tooltip-ek implementálása React Portálokkal

A tooltip-ek (súgók) kis, informatív felugró ablakok, amelyek akkor jelennek meg, amikor a felhasználó egy elem fölé viszi az egeret. A React Portálok használhatók olyan tooltip-ek létrehozására, amelyek helyesen vannak pozicionálva, függetlenül a szülő elem stílusától vagy elrendezésétől.

1. A portál gyökér létrehozása (ha még nem létezik)

Ha még nem hozott létre portál gyökeret a modálokhoz, adjon hozzá egy div elemet egyedi ID-val a HTML fájlhoz (általában a body-ba):

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

              
                Copy
              
            
          

2. A tooltip komponens létrehozása

            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 távolság
        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
              
            
          

Magyarázat:

• text prop: A tooltip-ben megjelenítendő szöveg.
• children prop: Az elem, amely kiváltja a tooltip megjelenését (az elem, amely fölé a felhasználó az egeret viszi).
• position prop: A tooltip pozíciója a kiváltó elemhez képest ('top', 'bottom', 'left', 'right'). Alapértelmezett értéke 'top'.
• isVisible state: Szabályozza a tooltip láthatóságát.
• tooltipRoot ref: Hivatkozik arra a DOM csomópontra, ahová a tooltip renderelődni fog (#tooltip-root).
• tooltipRef ref: Magára a tooltip elemre hivatkozik, amelyet a méreteinek kiszámításához használunk.
• triggerRef ref: Hivatkozik arra az elemre, amely kiváltja a tooltipet (a children).
• handleMouseEnter és handleMouseLeave: Eseménykezelők a kiváltó elem fölé húzott egérhez.
• updatePosition: Kiszámítja a tooltip helyes pozícióját a position prop, valamint a kiváltó és a tooltip elemek méretei alapján. A getBoundingClientRect()-et használja az elemek pozíciójának és méreteinek lekéréséhez a viewporthoz képest.
• ReactDOM.createPortal: Rendereli a tooltip tartalmát a tooltipRoot-ba.

3. A tooltip komponens használata

            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
              
            
          

Ez a példa bemutatja, hogyan lehet a Tooltip komponenst használni tooltip-ek hozzáadásához szövegekhez és gombokhoz. Testreszabhatja a tooltip szövegét és pozícióját a text és position prop-okkal.

4. A tooltip stílusozása

Adjon hozzá CSS stílusokat a tooltip pozicionálásához és stílusozásához. Itt egy alapvető példa:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Sötét háttér */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Biztosítja, hogy más tartalom felett legyen */
  white-space: pre-line; /* Tiszteletben tartja a sortöréseket a text prop-ban */
}

            

              
                Copy
              
            
          

A CSS magyarázata:

• position: absolute: A tooltipet a tooltip-root-hoz képest pozicionálja. A React komponensben lévő updatePosition függvény számítja ki a pontos top és left értékeket, hogy a tooltip a kiváltó elem közelében helyezkedjen el.
• background-color: rgba(0, 0, 0, 0.8): Létrehoz egy enyhén átlátszó sötét hátteret a tooltip számára.
• white-space: pre-line: Ez fontos a text prop-ban esetlegesen szereplő sortörések megőrzéséhez. Enélkül a tooltip szövege egyetlen sorban jelenne meg.

Globális szempontok és bevált gyakorlatok

Amikor React alkalmazásokat fejleszt egy globális közönség számára, vegye figyelembe ezeket a bevált gyakorlatokat:

• Nemzetköziesítés (i18n): Használjon egy olyan könyvtárat, mint a react-i18next vagy a FormatJS a fordítások és a lokalizáció kezelésére. Ez lehetővé teszi, hogy könnyen adaptálja alkalmazását különböző nyelvekhez és régiókhoz. A modálok és tooltip-ek esetében győződjön meg arról, hogy a szöveges tartalom megfelelően le van fordítva.
• Jobbról-balra (RTL) támogatás: A jobbról balra olvasott nyelvek (pl. arab, héber) esetében győződjön meg arról, hogy a modálok és tooltip-ek helyesen jelennek meg. Lehet, hogy módosítania kell az elemek pozicionálását és stílusát az RTL elrendezésekhez. A CSS logikai tulajdonságai (pl. margin-inline-start a margin-left helyett) hasznosak lehetnek.
• Kulturális érzékenység: Legyen tekintettel a kulturális különbségekre a modálok és tooltip-ek tervezésekor. Kerülje az olyan képek vagy szimbólumok használatát, amelyek sértőek vagy nem megfelelőek lehetnek bizonyos kultúrákban.
• Időzónák és dátumformátumok: Ha a modálok vagy tooltip-ek dátumokat vagy időpontokat jelenítenek meg, győződjön meg arról, hogy azok a felhasználó helyi beállításainak és időzónájának megfelelően vannak formázva. Olyan könyvtárak, mint a moment.js (bár elavult, de még mindig széles körben használják) vagy a date-fns segíthetnek ebben.
• Akadálymentesítés a különböző képességekhez: Tartsa be az akadálymentesítési irányelveket (WCAG), hogy biztosítsa, hogy a modálok és tooltip-ek használhatók legyenek a fogyatékkal élő emberek számára. Ez magában foglalja az alternatív szöveg biztosítását a képekhez, a megfelelő színkontraszt biztosítását és a billentyűzetes navigáció támogatását.

Összegzés

A React Portálok egy hatékony eszköz a rugalmas és akadálymentes felhasználói felületek építéséhez. Ha megérti, hogyan kell őket hatékonyan használni, olyan modálokat és tooltip-eket hozhat létre, amelyek javítják a felhasználói élményt, valamint a React alkalmazások szerkezetét és karbantarthatóságát. Ne felejtse el előtérbe helyezni az akadálymentesítést és a globális szempontokat, amikor egy sokszínű közönség számára fejleszt, biztosítva, hogy alkalmazásai befogadók és mindenki számára használhatók legyenek.

További tanulnivalók

• React Portálok Dokumentáció
• Webtartalom Akadálymentesítési Irányelvek (WCAG)
• react-i18next