React Portals Use Cases Modals aur Tooltips (in Hindi)

✨ Quick Answer: React Portals kya hai? Modals aur Tooltips ke real-world use cases Hindi me samjhein aur DOM hierarchy se bahar components render karna sikhein!

React Portals in Hindi: Modals aur Tooltips banane ke liye DOM hierarchy ko bypass karne ka sahi tarika aur complete code examples ke saath samjhein.

तो दोस्तों, क्या आपके साथ कभी ऐसा हुआ है कि आपने बहुत मेहनत से एक सुंदर सा Modal या Tooltip बनाया, लेकिन जैसे ही उसे open किया, वो CSS के overflow: hidden या z-index के मकड़जाल में फंसकर आधा कट गया? या फिर पैरेंट डिब (Parent Div) की styling की वजह से उसकी position ही बिगड़ गई? यह एक ऐसा सिरदर्द है जिससे हर ReactJS डेवलपर कभी न कभी जरूर परेशान होता है।

⚡ Quick Answer: React Portals एक ऐसी feature है जो हमें किसी भी React component को उसके normal parent DOM hierarchy से बाहर, DOM में किसी भी अन्य जगह (जैसे document.body या किसी custom div) पर render करने की आजादी देती है, बिना React component tree के logical state और event system को प्रभावित किए।

React Portals क्या है और इसकी जरूरत क्यों पड़ती है?

आमतौर पर जब हम React components बनाते हैं, तो वे एक nested tree structure का पालन करते हैं। इसका मतलब है कि अगर Component B, Component A के अंदर है, तो HTML DOM में भी Component B का Element, Component A के DOM Node के अंदर ही render होगा।

लेकिन ज़रा सोचिए, Modals, Tooltips, Custom Dropdowns, और Loaders जैसी UI elements के मामले में यह behavior मुसीबत बन जाता है। मान लीजिए आपके पास एक Sidebar component है जिसमें overflow: hidden लगा हुआ है। अब अगर आप इस Sidebar के अंदर एक Tooltip render करेंगे, तो वो Tooltip Sidebar की boundary के बाहर निकलते ही छिप (hide) जाएगा।

यहीं पर काम आता है React Portals। यह हमें एक "पोर्टल" या जादुई रास्ता देता है जिसके जरिए हम component को लिखते तो उसी nested structure के अंदर हैं (ताकि React state और props आसानी से pass हो सकें), लेकिन असल में HTML DOM में वह component उड़कर किसी दूसरी जगह (जैसे <body> के direct child के रूप में) जाकर render हो जाता है।

🏗️ React Portal DOM Flow Diagram
#root (Main App)
→
Nested Sidebar (Overflow Hidden)
⚡ Portal
#portal-root (Modal/Tooltip)
Diagram: React Portal components render outside the parent root div directly into a dedicated DOM node.

createPortal API का Syntax क्या है?

React Portals का इस्तेमाल करने के लिए हमें react-dom package से createPortal function को import करना होता है। इसका syntax बहुत ही सरल और सीधा है:

import ReactDOM from 'react-dom';

ReactDOM.createPortal(child, container);

चैंपियन, यहाँ इन दो parameters का मतलब समझो:

child: यह कोई भी renderable React component, element, string, या fragment हो सकता है जिसे आप render करना चाहते हैं।
container: यह वह HTML DOM element है जहाँ आप उस child को भेजना चाहते हैं (जैसे: document.getElementById('portal-root'))।

React Portals vs Normal Components में क्या अंतर है?

कई बार लोग सोचते हैं कि हम normal rendering से भी तो काम चला सकते हैं, फिर इसकी क्या जरूरत? चलिए इस comparison table से असली फर्क को समझते हैं:

Feature / Property	Normal Components Rendering	React Portals Rendering
DOM Positioning	Parent element के अंदर ही nested render होता है।	Parent tree से बाहर किसी भी DOM node में render हो सकता है।
CSS Styling Constraints	Parent के `overflow`, `z-index`, और `position` से प्रभावित होता है।	Parent CSS rules से बिल्कुल आजाद होता है।
Event Bubbling	Normal React event hierarchy के अनुसार bubble करता है।	DOM में बाहर होने के बावजूद, React Virtual DOM tree के अनुसार bubble करता है।
Best Use Case	Standard layout components (Headers, Cards, Buttons).	Global overlay components (Modals, Tooltips, Popovers).

React Portals की मदद से Modal Component कैसे बनाएं?

चलिए, अब सीधे काम की बात पर आते हैं और एक real-world, production-ready Modal component बनाते हैं। हम इसे step-by-step समझेंगे ताकि कोई भी कन्फ्यूजन न रहे।

Step 1: HTML File में Portal Target Element जोड़ें

सबसे पहले हमें अपने React project की main HTML file (आमतौर पर Vite प्रोजेक्ट्स में index.html या Public folder में) में जाना होगा और <div id="root"></div> के ठीक नीचे एक नया div element जोड़ना होगा:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Portals Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Portal Target Node -->
    <div id="portal-root"></div>
  </body>
</html>

Step 2: Modal Component का Code लिखें

अब हम एक Modal.jsx फ़ाइल बनाएंगे। ध्यान देने वाली बात ये है कि हम यहाँ clean CSS styles भी inline या stylesheet के रूप में handle करेंगे ताकि यह बाहर क्लिक होने पर बंद हो सके, और escape key दबाने पर भी close हो सके (जो कि accessibility के लिए बहुत जरूरी है)।

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

const Modal = ({ isOpen, onClose, title, children }) => {
  // Escape key दबाने पर modal बंद करने के लिए useEffect hook
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.body.style.overflow = 'hidden'; // Screen scroll block handle karein
      window.addEventListener('keydown', handleKeyDown);
    }

    return () => {
      document.body.style.overflow = 'unset';
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]);

  // Agar modal open nahi hai to kuch render na karein
  if (!isOpen) return null;

  // Modal target node ko select karein
  const portalNode = document.getElementById('portal-root');
  if (!portalNode) return null;

  // CSS Styles in Object
  const backdropStyle = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1000,
  };

  const modalStyle = {
    background: '#ffffff',
    padding: '24px',
    borderRadius: '12px',
    maxWidth: '500px',
    width: '90%',
    boxShadow: '0 10px 25px rgba(0,0,0,0.2)',
    position: 'relative',
  };

  const closeBtnStyle = {
    position: 'absolute',
    top: '15px',
    right: '15px',
    background: 'none',
    border: 'none',
    fontSize: '20px',
    cursor: 'pointer',
    color: '#64748b',
  };

  return ReactDOM.createPortal(
    <div style={backdropStyle} onClick={onClose}>
      <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
        <button style={closeBtnStyle} onClick={onClose}>&times;</button>
        <h3 style={{ marginTop: 0, color: '#1e293b' }}>{title}</h3>
        <div style={{ color: '#475569', lineHeight: '1.6' }}>
          {children}
        </div>
      </div>
    </div>,
    portalNode
  );
};

export default Modal;

Step 3: App.jsx में Modal को Use करना

अब अपने main container component में इस Modal को import करते हैं और state के जरिए control करते हैं:

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

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

  return (
    <div style={{ padding: '40px', fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1>React Portals Modal Tutorial</h1>
      <p>यह बटन दबाकर देखें कि कैसे modal direct body tag ke niche render hota hai.</p>
      
      <button 
        onClick={() => setIsModalOpen(true)}
        style={{
          padding: '12px 24px',
          fontSize: '16px',
          backgroundColor: '#2563eb',
          color: '#fff',
          border: 'none',
          borderRadius: '8px',
          cursor: 'pointer',
          fontWeight: '600'
        }}
      >
        Open Magic Modal
      </button>

      <Modal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)} 
        title="बधाई हो, पोर्टल काम कर रहा है!"
      >
        <p>दोस्तों, यह modal HTML DOM में "#root" div के बाहर "portal-root" में render हो रहा है, लेकिन React Component Tree में यह अभी भी App component का ही हिस्सा है।</p>
      </Modal>
    </div>
  );
}

export default App;

React Portals का use करके Tooltip कैसे बनाएं?

Modals के बाद, Tooltips दूसरी सबसे बड़ी चुनौती होती हैं। मान लीजिए आपके पास एक card layout है जिसका overflow dynamic है। वहाँ standard tooltips कट जाते हैं। चलिए, React Portal का use करके एक positioning-aware Tooltip बनाते हैं।

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

const Tooltip = ({ text, children }) => {
  const [show, setShow] = useState(false);
  const [coords, setCoords] = useState({ top: 0, left: 0 });
  const triggerRef = useRef(null);

  const handleMouseEnter = () => {
    if (triggerRef.current) {
      const rect = triggerRef.current.getBoundingClientRect();
      // Tooltip position setup (Element ke thik upar center me)
      setCoords({
        top: rect.top + window.scrollY - 40,
        left: rect.left + window.scrollX + rect.width / 2,
      });
      setShow(true);
    }
  };

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

  const tooltipStyle = {
    position: 'absolute',
    top: `${coords.top}px`,
    left: `${coords.left}px`,
    transform: 'translateX(-50%)',
    backgroundColor: '#1e293b',
    color: '#ffffff',
    padding: '6px 12px',
    borderRadius: '6px',
    fontSize: '12px',
    whiteSpace: 'nowrap',
    pointerEvents: 'none',
    zIndex: 9999,
    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
  };

  return (
    <span 
      ref={triggerRef} 
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave}
      style={{ display: 'inline-block', cursor: 'pointer', textDecoration: 'underline' }}
    >
      {children}
      {show && ReactDOM.createPortal(
        <div style={tooltipStyle}>
          {text}
        </div>,
        document.body
      )}
    </span>
  );
};

export default Tooltip;

देखा आपने? हमने Tooltip को document.body में सीधे render किया है ताकि CSS layout rules उस पर हावी न हो सकें।

React Portals का use करते समय Event Bubbling कैसे काम करती है?

अब आप सोच रहे होंगे, "भाई, अगर DOM node बिल्कुल अलग जगह पर है, तो Event Bubbling कैसे काम करेगी? क्या child button पर click करने से parent element का click handler trigger होगा?"

हाँ, बिल्कुल होगा! और यही React की सबसे बड़ी खूबसूरती है।

भले ही Portal का DOM Node आपके main root tree से बाहर कहीं भी हो, React के perspective से यह अभी भी उसी React Component Tree का हिस्सा है। इसलिए React Event System (SyntheticEvents) वैसे ही काम करता है जैसे वो normal nested layout में करता।

इसे समझने के लिए इस मजेदार उदाहरण को देखें:

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

function ParentComponent() {
  const [clickCount, setClickCount] = useState(0);

  // Yeh click handler Portal child par click hone par bhi trigger hoga!
  const handleParentClick = () => {
    setClickCount((prev) => prev + 1);
  };

  return (
    <div 
      onClick={handleParentClick} 
      style={{ padding: '20px', border: '2px dashed #a855f7', background: '#faf5ff' }}
    >
      <h3>Parent Component (Clicks: {clickCount})</h3>
      <p>Portal child par click karne se bhi yeh count badhega, kyunki React Event Bubbling normal rehti hai!</p>
      
      <PortalChild />
    </div>
  );
}

function PortalChild() {
  const portalTarget = document.getElementById('portal-root') || document.body;
  
  return ReactDOM.createPortal(
    <div style={{ 
      background: '#10b981', 
      color: 'white', 
      padding: '12px', 
      marginTop: '20px',
      borderRadius: '6px' 
    }}>
      <p>Main Portal Node ke andar hoon, par Parent standard element me bubble up karega.</p>
      <button style={{ padding: '6px 12px', cursor: 'pointer' }}>Click Me</button>
    </div>,
    portalTarget
  );
}

export default ParentComponent;

अगर आप चाहते हैं कि Portal element का click event parent तक न पहुँचे, तो आपको child layout के handler में e.stopPropagation() का use करना होगा, जैसा हमने ऊपर Modal Component वाले code में किया है।

React Portals use करते समय Common Errors और उन्हें कैसे Solve करें?

काम करते वक्त error आना तो तय है, लेकिन घबराइए मत! यहाँ कुछ आम गलतियाँ और उनके solutions दिए गए हैं:

1. "Target container is not a DOM element" Error

वजह: यह exception तब आता है जब React, DOM render करने की कोशिश करता है लेकिन उसे document.getElementById('portal-root') जैसी specific node मिलती ही नहीं (शायद spelling mistake हो या element load न हुआ हो)।

Solution: हमेशा double check करें कि आपकी index.html फ़ाइल में वह element exist करता हो। इसके अलावा, SSR frameworks (जैसे Next.js) में rendering से पहले client-side check जरूर लगाएं:

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

if (!mounted) return null;
return ReactDOM.createPortal(<Child />, document.getElementById('portal-root'));

2. Dynamic Mount / Cleanup issue

वजह: अगर आप dynamically element create करके portal attach कर रहे हैं और component unmount होने पर उसे clean नहीं कर रहे हैं, तो memory leak हो सकता है।

Solution: useEffect में dynamic divs को clean करना सीखें। clean-up function में container को document.body.removeChild(el) के जरिए clear करें।

Best Practices और Performance Tips क्या हैं?

Accessibility (A11y) का ध्यान रखें: जब भी Modal open हो, screen readers के लिए parent element को hide (aria-hidden="true") करें और keyboard focus को Modal के अंदर ही lock (Focus Trap) करें। इसके लिए आप React Official Docs के guidelines का पालन कर सकते हैं।
SSR compatibility: Server-side rendering में document element server पर available नहीं होता। इसलिए ऊपर बताए गए mounted state approach का इस्तेमाल करें ताकि build fail न हो।
Z-Index Management: Portal nodes के लिए CSS में एक standard stack बनाएं (जैसे Modals के लिए z-index: 1000, tooltips के लिए 1100) ताकि UI overlap control में रहे।

तो दोस्तों, हमने आज सीखा कि कैसे React Portals बड़े ही जादुई ढंग से DOM hierarchy को तोड़कर हमारे Modals और Tooltips को position-independent और flexible बनाते हैं। अगली बार जब CSS overflow या z-index आपके design को बिगाड़ने की कोशिश करे, तो बिना झिझक React Portals का इस्तेमाल करें और इस समस्या को जड़ से खत्म करें।

Frequently Asked Questions (FAQs)

Q1: React Portals का use कब करना चाहिए?

जब भी आपको ऐसा UI element बनाना हो जो parent CSS wrapper styles (जैसे overflow: hidden, relative width, ya z-index limits) से बाहर निकलकर स्क्रीन पर दिखे, जैसे Modals, Popovers, Tooltips, Global Loaders, और Side-drawers.

Q2: क्या React Portal use करने से event listeners काम करना बंद कर देते हैं?

बिल्कुल नहीं! React Synthetic Event system, React virtual component tree के design पर काम करता है, न कि real DOM architecture पर। इसलिए Portal node पर होने वाले events भी parent level पर bubble up होते हैं।

Q3: React Portals और standard components में से performance के लिहाज से कौन सा बेहतर है?

दोनों की performance में कोई खास अंतर नहीं होता है। React Portals सिर्फ insertion target बदलते हैं, rendering cycle और updates सामान्य components की तरह ही fast और optimized रहते हैं।

Q4: क्या Next.js या Server-Side Rendering (SSR) में React Portals काम करते हैं?

हाँ, वे काम करते हैं। लेकिन क्योंकि server पर 'window' या 'document' object accessible नहीं होता, आपको Client Side mount check (useEffect) का इस्तेमाल करके ensure करना होगा कि Portal सिर्फ client browser पर ही execute हो।

Q5: क्या हम एक React Component में multiple portals का इस्तेमाल कर सकते हैं?

हाँ, आप एक ही component में या पूरी application में जितने चाहें उतने Portals का use कर सकते हैं। ये सभी अलग-अलग target containers में render किए जा सकते हैं।

Banti Kevat

React Portals Use Cases Modals aur Tooltips (in Hindi)

React Portals क्या है और इसकी जरूरत क्यों पड़ती है?

createPortal API का Syntax क्या है?

React Portals vs Normal Components में क्या अंतर है?

React Portals की मदद से Modal Component कैसे बनाएं?

Step 1: HTML File में Portal Target Element जोड़ें

Step 2: Modal Component का Code लिखें

Step 3: App.jsx में Modal को Use करना

React Portals का use करके Tooltip कैसे बनाएं?

React Portals का use करते समय Event Bubbling कैसे काम करती है?

React Portals use करते समय Common Errors और उन्हें कैसे Solve करें?

1. "Target container is not a DOM element" Error

2. Dynamic Mount / Cleanup issue

Best Practices और Performance Tips क्या हैं?

Frequently Asked Questions (FAQs)

Kya yeh article helpful tha?

Related ArticlesAapko yeh bhi pasand aayega

टिप्पणियाँ

एक टिप्पणी भेजें

DorkGPT: Revolutionizing the Future of AI-Powered Solutions

What is chatGPT

Image Resize, Filter, and Download Tool

What is Python used for?

2025 में सबसे ज्यादा इस्तेमाल होने वाले 15 Free AI Tools – Bloggers, Students और Freelancers के लिए