రియాక్ట్ పోర్టల్స్: మెరుగైన UX కోసం మోడల్స్ మరియు టూల్‌టిప్స్‌లో నైపుణ్యం

ఆధునిక వెబ్ డెవలప్‌మెంట్‌లో, స్పష్టమైన మరియు ఆకర్షణీయమైన యూజర్ ఇంటర్‌ఫేస్‌లను రూపొందించడం చాలా ముఖ్యం. యూజర్ ఇంటర్‌ఫేస్‌లను నిర్మించడానికి ప్రసిద్ధ జావాస్క్రిప్ట్ లైబ్రరీ అయిన రియాక్ట్, దీనిని సాధించడానికి వివిధ సాధనాలు మరియు టెక్నిక్‌లను అందిస్తుంది. అటువంటి ఒక శక్తివంతమైన సాధనం రియాక్ట్ పోర్టల్స్. ఈ బ్లాగ్ పోస్ట్ రియాక్ట్ పోర్టల్స్ ప్రపంచాన్ని పరిశోధిస్తుంది, యాక్సెస్ చేయగల మరియు దృశ్యపరంగా ఆకర్షణీయమైన మోడల్స్ మరియు టూల్‌టిప్స్‌ను నిర్మించడంలో వాటి అనువర్తనంపై దృష్టి పెడుతుంది.

రియాక్ట్ పోర్టల్స్ అంటే ఏమిటి?

రియాక్ట్ పోర్టల్స్ ఒక కాంపోనెంట్ యొక్క చిల్డ్రన్‌ను పేరెంట్ కాంపోనెంట్ యొక్క DOM హైరార్కీ వెలుపల ఉన్న DOM నోడ్‌లోకి రెండర్ చేయడానికి ఒక మార్గాన్ని అందిస్తాయి. సరళంగా చెప్పాలంటే, ఇది ప్రామాణిక రియాక్ట్ కాంపోనెంట్ ట్రీ నుండి విముక్తి పొందడానికి మరియు ఎలిమెంట్లను నేరుగా HTML నిర్మాణం యొక్క వేరే భాగంలోకి చొప్పించడానికి మిమ్మల్ని అనుమతిస్తుంది. స్టాకింగ్ కాంటెక్స్ట్‌ను నియంత్రించాల్సిన లేదా వాటి పేరెంట్ కంటైనర్ సరిహద్దుల వెలుపల ఎలిమెంట్లను ఉంచాల్సిన పరిస్థితులకు ఇది ప్రత్యేకంగా ఉపయోగపడుతుంది.

సాంప్రదాయకంగా, రియాక్ట్ కాంపోనెంట్లు DOM లోపల వాటి పేరెంట్ కాంపోనెంట్ల యొక్క చిల్డ్రన్‌గా రెండర్ చేయబడతాయి. ఇది కొన్నిసార్లు స్టైలింగ్ మరియు లేఅవుట్ సవాళ్లకు దారితీస్తుంది, ప్రత్యేకించి మోడల్స్ లేదా టూల్‌టిప్స్ వంటి ఎలిమెంట్లతో వ్యవహరించేటప్పుడు, అవి ఇతర కంటెంట్ పైన కనిపించాలి లేదా వ్యూపోర్ట్‌కు సంబంధించి ఉంచబడాలి. రియాక్ట్ పోర్టల్స్ ఈ ఎలిమెంట్లను నేరుగా DOM ట్రీ యొక్క వేరే భాగంలోకి రెండర్ చేయడానికి అనుమతించడం ద్వారా ఈ పరిమితులను అధిగమించి ఒక పరిష్కారాన్ని అందిస్తాయి.

రియాక్ట్ పోర్టల్స్ ఎందుకు ఉపయోగించాలి?

అనేక ముఖ్య ప్రయోజనాలు రియాక్ట్ పోర్టల్స్‌ను మీ రియాక్ట్ డెవలప్‌మెంట్ ఆయుధాగారంలో ఒక విలువైన సాధనంగా చేస్తాయి:

• మెరుగైన స్టైలింగ్ మరియు లేఅవుట్: పోర్టల్స్ వాటి పేరెంట్ కంటైనర్ వెలుపల ఎలిమెంట్లను ఉంచడానికి మిమ్మల్ని అనుమతిస్తాయి, overflow: hidden, z-index పరిమితులు లేదా సంక్లిష్టమైన లేఅవుట్ పరిమితుల వల్ల కలిగే స్టైలింగ్ సమస్యలను అధిగమిస్తాయి. ఒక మోడల్ దాని పేరెంట్ కంటైనర్ overflow: hidden సెట్ చేసినప్పటికీ, మొత్తం స్క్రీన్‌ను కవర్ చేయాల్సిన అవసరం ఉందని ఊహించుకోండి. పోర్టల్స్ మోడల్‌ను నేరుగా bodyలోకి రెండర్ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి, ఈ పరిమితిని అధిగమిస్తాయి.
• మెరుగైన యాక్సెసిబిలిటీ: యాక్సెసిబిలిటీ కోసం పోర్టల్స్ చాలా ముఖ్యమైనవి, ప్రత్యేకించి మోడల్స్‌తో వ్యవహరించేటప్పుడు. మోడల్ కంటెంట్‌ను నేరుగా bodyలోకి రెండర్ చేయడం ద్వారా మీరు ఫోకస్ ట్రాపింగ్‌ను సులభంగా నిర్వహించవచ్చు, స్క్రీన్ రీడర్‌లు లేదా కీబోర్డ్ నావిగేషన్‌ను ఉపయోగించే వినియోగదారులు మోడల్ తెరిచి ఉన్నప్పుడు దానిలోనే ఉండేలా చూసుకోవచ్చు. ఇది ఒక అతుకులు లేని మరియు యాక్సెస్ చేయగల వినియోగదారు అనుభవాన్ని అందించడానికి అవసరం.
• క్లీనర్ కాంపోనెంట్ స్ట్రక్చర్: మోడల్ లేదా టూల్‌టిప్ కంటెంట్‌ను ప్రధాన కాంపోనెంట్ ట్రీ వెలుపల రెండర్ చేయడం ద్వారా, మీరు మీ కాంపోనెంట్ స్ట్రక్చర్‌ను మరింత శుభ్రంగా మరియు నిర్వహించగలిగేలా ఉంచుకోవచ్చు. ఈ విధంగా బాధ్యతలను వేరుచేయడం వలన మీ కోడ్‌ను చదవడం, అర్థం చేసుకోవడం మరియు నిర్వహించడం సులభం అవుతుంది.
• స్టాకింగ్ కాంటెక్స్ట్ సమస్యలను నివారించడం: CSSలో స్టాకింగ్ కాంటెక్స్ట్‌లను నిర్వహించడం చాలా కష్టం. పోర్టల్స్ ఎలిమెంట్లను నేరుగా DOM యొక్క రూట్‌లోకి రెండర్ చేయడానికి మిమ్మల్ని అనుమతించడం ద్వారా ఈ సమస్యలను నివారించడంలో మీకు సహాయపడతాయి, పేజీలోని ఇతర ఎలిమెంట్‌లకు సంబంధించి అవి ఎల్లప్పుడూ సరిగ్గా ఉండేలా చూసుకుంటాయి.

రియాక్ట్ పోర్టల్స్‌తో మోడల్స్ అమలు చేయడం

మోడల్స్ ముఖ్యమైన సమాచారాన్ని ప్రదర్శించడానికి లేదా వినియోగదారుల నుండి ఇన్‌పుట్ కోరడానికి ఉపయోగించే ఒక సాధారణ UI నమూనా. రియాక్ట్ పోర్టల్స్‌ను ఉపయోగించి మోడల్‌ను ఎలా సృష్టించాలో చూద్దాం.

1. పోర్టల్ రూట్‌ను సృష్టించడం

మొదట, మీరు మోడల్ రెండర్ చేయబడే DOM నోడ్‌ను సృష్టించాలి. ఇది సాధారణంగా మీ HTML ఫైల్‌కు (సాధారణంగా bodyలో) ఒక నిర్దిష్ట IDతో div ఎలిమెంట్‌ను జోడించడం ద్వారా జరుగుతుంది:

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

              
                Copy
              
            
          

2. మోడల్ కాంపోనెంట్‌ను సృష్టించడం

తరువాత, మోడల్‌ను సూచించే రియాక్ట్ కాంపోనెంట్‌ను సృష్టించండి. ఈ కాంపోనెంట్ మోడల్ యొక్క కంటెంట్ మరియు లాజిక్‌ను కలిగి ఉంటుంది.

            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
              
            
          

వివరణ:

• isOpen ప్రాప్: మోడల్ కనిపిస్తుందా లేదా అని నిర్ణయిస్తుంది.
• onClose ప్రాప్: మోడల్‌ను మూసివేయడానికి ఒక ఫంక్షన్.
• children ప్రాప్: మోడల్ లోపల ప్రదర్శించబడే కంటెంట్.
• modalRoot ref: మోడల్ రెండర్ చేయబడే DOM నోడ్‌ను (#modal-root) సూచిస్తుంది.
• useEffect హుక్: పోర్టల్ రూట్ వెంటనే అందుబాటులో లేకపోవడం వల్ల కలిగే సమస్యలను నివారించడానికి కాంపోనెంట్ మౌంట్ అయిన తర్వాత మాత్రమే మోడల్ రెండర్ అయ్యేలా చేస్తుంది.
• ReactDOM.createPortal: ఇది రియాక్ట్ పోర్టల్స్‌ను ఉపయోగించడానికి కీలకం. ఇది రెండు ఆర్గ్యుమెంట్లను తీసుకుంటుంది: రెండర్ చేయవలసిన రియాక్ట్ ఎలిమెంట్ (modalContent) మరియు అది రెండర్ చేయబడవలసిన DOM నోడ్ (modalRoot.current).
• ఓవర్‌లేపై క్లిక్ చేయడం: మోడల్‌ను మూసివేస్తుంది. మోడల్ లోపల క్లిక్‌లు దానిని మూసివేయకుండా నిరోధించడానికి మేము modal-content div పై e.stopPropagation() ఉపయోగిస్తాము.

3. మోడల్ కాంపోనెంట్‌ను ఉపయోగించడం

ఇప్పుడు, మీరు మీ అప్లికేషన్‌లో Modal కాంపోనెంట్‌ను ఉపయోగించవచ్చు:

            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
              
            
          

ఈ ఉదాహరణ isOpen ప్రాప్ మరియు openModal మరియు closeModal ఫంక్షన్లను ఉపయోగించి మోడల్ యొక్క విజిబిలిటీని ఎలా నియంత్రించాలో చూపిస్తుంది. <Modal> ట్యాగ్‌ల లోపల ఉన్న కంటెంట్ మోడల్ లోపల రెండర్ చేయబడుతుంది.

4. మోడల్‌కు స్టైలింగ్ చేయడం

మోడల్‌ను పొజిషన్ చేయడానికి మరియు స్టైల్ చేయడానికి CSS స్టైల్స్ జోడించండి. ఇక్కడ ఒక ప్రాథమిక ఉదాహరణ ఉంది:

            .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
              
            
          

CSS వివరణ:

• position: fixed: స్క్రోలింగ్‌తో సంబంధం లేకుండా మోడల్ మొత్తం వ్యూపోర్ట్‌ను కవర్ చేసేలా చేస్తుంది.
• background-color: rgba(0, 0, 0, 0.5): మోడల్ వెనుక సెమీ-ట్రాన్స్‌పరెంట్ ఓవర్‌లేని సృష్టిస్తుంది.
• display: flex, justify-content: center, align-items: center: మోడల్‌ను క్షితిజ సమాంతరంగా మరియు నిలువుగా మధ్యలో ఉంచుతుంది.
• z-index: 1000: పేజీలోని అన్ని ఇతర ఎలిమెంట్ల పైన మోడల్ రెండర్ అయ్యేలా చేస్తుంది.

5. మోడల్స్ కోసం యాక్సెసిబిలిటీ పరిగణనలు

మోడల్స్‌ను అమలు చేసేటప్పుడు యాక్సెసిబిలిటీ చాలా ముఖ్యం. ఇక్కడ కొన్ని ముఖ్య పరిగణనలు ఉన్నాయి:

• ఫోకస్ మేనేజ్‌మెంట్: మోడల్ తెరుచుకున్నప్పుడు, ఫోకస్ స్వయంచాలకంగా మోడల్‌లోని ఒక ఎలిమెంట్‌కు (ఉదా., మొదటి ఇన్‌పుట్ ఫీల్డ్ లేదా క్లోజ్ బటన్) తరలించబడాలి. మోడల్ మూసివేసినప్పుడు, ఫోకస్ మోడల్ తెరవడానికి కారణమైన ఎలిమెంట్‌కు తిరిగి రావాలి. ఇది తరచుగా గతంలో ఫోకస్ చేయబడిన ఎలిమెంట్‌ను నిల్వ చేయడానికి రియాక్ట్ యొక్క useRef హుక్‌ను ఉపయోగించడం ద్వారా సాధించబడుతుంది.
• కీబోర్డ్ నావిగేషన్: వినియోగదారులు కీబోర్డ్ (ట్యాబ్ కీ) ఉపయోగించి మోడల్‌ను నావిగేట్ చేయగలరని నిర్ధారించుకోండి. ఫోకస్ మోడల్ లోపల ట్రాప్ చేయబడాలి, వినియోగదారులు అనుకోకుండా దాని నుండి ట్యాబ్ చేయకుండా నిరోధిస్తుంది. react-focus-lock వంటి లైబ్రరీలు దీనికి సహాయపడతాయి.
• ARIA అట్రిబ్యూట్స్: స్క్రీన్ రీడర్‌లకు మోడల్ గురించి సెమాంటిక్ సమాచారాన్ని అందించడానికి ARIA అట్రిబ్యూట్స్‌ను ఉపయోగించండి. ఉదాహరణకు, మోడల్ కంటైనర్‌పై aria-modal="true" మరియు మోడల్‌కు వివరణాత్మక లేబుల్‌ను అందించడానికి aria-label లేదా aria-labelledby ఉపయోగించండి.
• మూసివేత మెకానిజం: మోడల్‌ను మూసివేయడానికి బహుళ మార్గాలను అందించండి, ఉదాహరణకు క్లోజ్ బటన్, ఓవర్‌లేపై క్లిక్ చేయడం లేదా ఎస్కేప్ కీని నొక్కడం వంటివి.

ఫోకస్ మేనేజ్‌మెంట్ ఉదాహరణ (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
              
            
          

ఫోకస్ మేనేజ్‌మెంట్ కోడ్ వివరణ:

• previouslyFocusedElement.current: మోడల్ తెరవడానికి ముందు ఫోకస్‌లో ఉన్న ఎలిమెంట్‌ను నిల్వ చేస్తుంది.
• firstFocusableElement.current: మోడల్ *లోపల* మొదటి ఫోకస్ చేయగల ఎలిమెంట్‌ను సూచిస్తుంది (ఈ ఉదాహరణలో, ఒక టెక్స్ట్ ఇన్‌పుట్).
• మోడల్ తెరుచుకున్నప్పుడు (isOpen నిజం అయితే):
  • ప్రస్తుతం ఫోకస్ చేయబడిన ఎలిమెంట్ నిల్వ చేయబడుతుంది.
  • ఫోకస్ firstFocusableElement.currentకు తరలించబడుతుంది.
  • మోడల్‌ను మూసివేయడానికి ఎస్కేప్ కీ కోసం ఒక ఈవెంట్ లిజనర్ జోడించబడుతుంది.
• మోడల్ మూసివేసినప్పుడు (క్లీనప్ ఫంక్షన్):
  • ఎస్కేప్ కీ ఈవెంట్ లిజనర్ తొలగించబడుతుంది.
  • గతంలో ఫోకస్ చేయబడిన ఎలిమెంట్‌కు ఫోకస్ తిరిగి వస్తుంది.

రియాక్ట్ పోర్టల్స్‌తో టూల్‌టిప్స్ అమలు చేయడం

టూల్‌టిప్స్ చిన్న, సమాచార పాప్‌అప్‌లు, వినియోగదారు ఒక ఎలిమెంట్‌పై హోవర్ చేసినప్పుడు కనిపిస్తాయి. రియాక్ట్ పోర్టల్స్‌ను ఉపయోగించి పేరెంట్ ఎలిమెంట్ యొక్క స్టైలింగ్ లేదా లేఅవుట్‌తో సంబంధం లేకుండా సరిగ్గా పొజిషన్ చేయబడిన టూల్‌టిప్స్‌ను సృష్టించవచ్చు.

1. పోర్టల్ రూట్‌ను సృష్టించడం (ఇప్పటికే సృష్టించకపోతే)

మీరు ఇప్పటికే మోడల్స్ కోసం పోర్టల్ రూట్‌ను సృష్టించకపోతే, మీ HTML ఫైల్‌కు (సాధారణంగా bodyలో) ఒక నిర్దిష్ట IDతో div ఎలిమెంట్‌ను జోడించండి:

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

              
                Copy
              
            
          

2. టూల్‌టిప్ కాంపోనెంట్‌ను సృష్టించడం

            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
              
            
          

వివరణ:

• text ప్రాప్: టూల్‌టిప్‌లో ప్రదర్శించవలసిన టెక్స్ట్.
• children ప్రాప్: టూల్‌టిప్‌ను ప్రేరేపించే ఎలిమెంట్ (వినియోగదారు హోవర్ చేసే ఎలిమెంట్).
• position ప్రాప్: ట్రిగ్గర్ ఎలిమెంట్‌కు సంబంధించి టూల్‌టిప్ యొక్క పొజిషన్ ('top', 'bottom', 'left', 'right'). డిఫాల్ట్‌గా 'top' ఉంటుంది.
• isVisible స్టేట్: టూల్‌టిప్ యొక్క విజిబిలిటీని నియంత్రిస్తుంది.
• tooltipRoot ref: టూల్‌టిప్ రెండర్ చేయబడే DOM నోడ్‌ను (#tooltip-root) సూచిస్తుంది.
• tooltipRef ref: టూల్‌టిప్ ఎలిమెంట్‌ను సూచిస్తుంది, దాని కొలతలను లెక్కించడానికి ఉపయోగిస్తారు.
• triggerRef ref: టూల్‌టిప్‌ను ప్రేరేపించే ఎలిమెంట్‌ను (children) సూచిస్తుంది.
• handleMouseEnter మరియు handleMouseLeave: ట్రిగ్గర్ ఎలిమెంట్‌పై హోవర్ చేయడానికి ఈవెంట్ హ్యాండ్లర్లు.
• updatePosition: position ప్రాప్ మరియు ట్రిగ్గర్ మరియు టూల్‌టిప్ ఎలిమెంట్ల కొలతల ఆధారంగా టూల్‌టిప్ యొక్క సరైన పొజిషన్‌ను లెక్కిస్తుంది. వ్యూపోర్ట్‌కు సంబంధించి ఎలిమెంట్ల పొజిషన్ మరియు కొలతలను పొందడానికి ఇది getBoundingClientRect()ను ఉపయోగిస్తుంది.
• ReactDOM.createPortal: టూల్‌టిప్ కంటెంట్‌ను tooltipRootలోకి రెండర్ చేస్తుంది.

3. టూల్‌టిప్ కాంపోనెంట్‌ను ఉపయోగించడం

            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
              
            
          

ఈ ఉదాహరణ టెక్స్ట్ మరియు బటన్లకు టూల్‌టిప్స్‌ను జోడించడానికి Tooltip కాంపోనెంట్‌ను ఎలా ఉపయోగించాలో చూపిస్తుంది. మీరు text మరియు position ప్రాప్స్‌ను ఉపయోగించి టూల్‌టిప్ యొక్క టెక్స్ట్ మరియు పొజిషన్‌ను అనుకూలీకరించవచ్చు.

4. టూల్‌టిప్‌కు స్టైలింగ్ చేయడం

టూల్‌టిప్‌ను పొజిషన్ చేయడానికి మరియు స్టైల్ చేయడానికి CSS స్టైల్స్ జోడించండి. ఇక్కడ ఒక ప్రాథమిక ఉదాహరణ ఉంది:

            .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
              
            
          

CSS వివరణ:

• position: absolute: tooltip-rootకు సంబంధించి టూల్‌టిప్‌ను పొజిషన్ చేస్తుంది. రియాక్ట్ కాంపోనెంట్‌లోని updatePosition ఫంక్షన్ ట్రిగ్గర్ ఎలిమెంట్ దగ్గర టూల్‌టిప్‌ను ఉంచడానికి కచ్చితమైన top మరియు left విలువలను లెక్కిస్తుంది.
• background-color: rgba(0, 0, 0, 0.8): టూల్‌టిప్ కోసం కొద్దిగా పారదర్శకమైన డార్క్ బ్యాక్‌గ్రౌండ్‌ను సృష్టిస్తుంది.
• white-space: pre-line: మీరు text ప్రాప్‌లో చేర్చగల లైన్ బ్రేక్‌లను భద్రపరచడానికి ఇది ముఖ్యం. ఇది లేకుండా, టూల్‌టిప్ టెక్స్ట్ అంతా ఒకే లైన్‌లో కనిపిస్తుంది.

ప్రపంచవ్యాప్త పరిగణనలు మరియు ఉత్తమ పద్ధతులు

ప్రపంచవ్యాప్త ప్రేక్షకుల కోసం రియాక్ట్ అప్లికేషన్‌లను అభివృద్ధి చేస్తున్నప్పుడు, ఈ ఉత్తమ పద్ధతులను పరిగణించండి:

• అంతర్జాతీయీకరణ (i18n): అనువాదాలు మరియు స్థానికీకరణను నిర్వహించడానికి react-i18next లేదా FormatJS వంటి లైబ్రరీని ఉపయోగించండి. ఇది మీ అప్లికేషన్‌ను వివిధ భాషలు మరియు ప్రాంతాలకు సులభంగా అనుకూలీకరించడానికి మిమ్మల్ని అనుమతిస్తుంది. మోడల్స్ మరియు టూల్‌టిప్స్ కోసం, టెక్స్ట్ కంటెంట్ సరిగ్గా అనువదించబడిందని నిర్ధారించుకోండి.
• కుడి-నుండి-ఎడమకు (RTL) మద్దతు: కుడి నుండి ఎడమకు చదివే భాషల కోసం (ఉదా., అరబిక్, హీబ్రూ), మీ మోడల్స్ మరియు టూల్‌టిప్స్ సరిగ్గా ప్రదర్శించబడతాయని నిర్ధారించుకోండి. RTL లేఅవుట్‌లకు అనుగుణంగా మీరు ఎలిమెంట్ల పొజిషనింగ్ మరియు స్టైలింగ్‌ను సర్దుబాటు చేయాల్సి రావచ్చు. CSS లాజికల్ ప్రాపర్టీస్ (ఉదా., margin-leftకు బదులుగా margin-inline-start) సహాయకరంగా ఉంటాయి.
• సాంస్కృతిక సున్నితత్వం: మీ మోడల్స్ మరియు టూల్‌టిప్స్‌ను డిజైన్ చేసేటప్పుడు సాంస్కృతిక భేదాల గురించి జాగ్రత్తగా ఉండండి. కొన్ని సంస్కృతులలో అప్రియమైన లేదా అనుచితమైన చిత్రాలు లేదా చిహ్నాలను ఉపయోగించడం మానుకోండి.
• టైమ్ జోన్‌లు మరియు తేదీ ఫార్మాట్‌లు: మీ మోడల్స్ లేదా టూల్‌టిప్స్ తేదీలు లేదా సమయాలను ప్రదర్శిస్తే, అవి వినియోగదారు యొక్క లొకేల్ మరియు టైమ్ జోన్ ప్రకారం ఫార్మాట్ చేయబడ్డాయని నిర్ధారించుకోండి. moment.js (వారసత్వమైనప్పటికీ, ఇప్పటికీ విస్తృతంగా ఉపయోగించబడుతుంది) లేదా date-fns వంటి లైబ్రరీలు దీనికి సహాయపడతాయి.
• విభిన్న సామర్థ్యాల కోసం యాక్సెసిబిలిటీ: మీ మోడల్స్ మరియు టూల్‌టిప్స్ వైకల్యాలున్న వ్యక్తులు ఉపయోగించగలవని నిర్ధారించుకోవడానికి యాక్సెసిబిలిటీ మార్గదర్శకాలకు (WCAG) కట్టుబడి ఉండండి. ఇందులో చిత్రాలకు ప్రత్యామ్నాయ టెక్స్ట్‌ను అందించడం, తగినంత రంగు కాంట్రాస్ట్‌ను నిర్ధారించడం మరియు కీబోర్డ్ నావిగేషన్ మద్దతును అందించడం వంటివి ఉంటాయి.

ముగింపు

రియాక్ట్ పోర్టల్స్ ఫ్లెక్సిబుల్ మరియు యాక్సెస్ చేయగల యూజర్ ఇంటర్‌ఫేస్‌లను నిర్మించడానికి ఒక శక్తివంతమైన సాధనం. వాటిని సమర్థవంతంగా ఎలా ఉపయోగించాలో అర్థం చేసుకోవడం ద్వారా, మీరు వినియోగదారు అనుభవాన్ని మెరుగుపరిచే మరియు మీ రియాక్ట్ అప్లికేషన్ల యొక్క నిర్మాణం మరియు నిర్వహణ సామర్థ్యాన్ని మెరుగుపరిచే మోడల్స్ మరియు టూల్‌టిప్స్‌ను సృష్టించవచ్చు. విభిన్న ప్రేక్షకుల కోసం అభివృద్ధి చేస్తున్నప్పుడు యాక్సెసిబిలిటీ మరియు ప్రపంచవ్యాప్త పరిగణనలకు ప్రాధాన్యత ఇవ్వాలని గుర్తుంచుకోండి, మీ అప్లికేషన్‌లు అందరికీ అందుబాటులో ఉండేలా మరియు ఉపయోగపడేలా చూసుకోండి.

మరింత నేర్చుకోవడానికి

• రియాక్ట్ పోర్టల్స్ డాక్యుమెంటేషన్
• వెబ్ కంటెంట్ యాక్సెసిబిలిటీ గైడ్‌లైన్స్ (WCAG)
• react-i18next