Afaq Shahid Khan

Posted on Jun 15

🌀 What is React Portal (And Why You Should Use It)

#react #javascript #ui #webdev

By Afaq Shahid Khan

Ever built a modal, toast, or dropdown and hit weird issues with z-index, overflow: hidden, or elements being clipped unexpectedly?

That’s where React Portals shine! ✨

Let’s break it down in plain English and see how and why you should start using portals today.

💡 What Is a React Portal?

Normally, React renders components within the parent DOM tree. But sometimes, you want to render something outside of that tree — like a modal that floats on top of everything.

React Portals let you do exactly that: render components outside the main DOM hierarchy, but still keep them fully connected to React (state, events, etc.).

🧪 Example:

ReactDOM.createPortal(
  <div>I'm outside the main DOM tree!</div>,
  document.body
);

Yes — that div will be rendered as a direct child of <body>, no matter where the component lives in your React app.

🛠 Build a Toast Notification Using React Portals

Let’s build something practical — a toast popup — and see how portals make it easy.

📦 1. Create a Toast Component

import ReactDOM from 'react-dom';

const Toast = ({ message }) => {
  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      bottom: '20px',
      right: '20px',
      backgroundColor: '#333',
      color: '#fff',
      padding: '12px 24px',
      borderRadius: '6px',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
      zIndex: 9999
    }}>
      {message}
    </div>,
    document.body // ✅ No need for a custom portal root!
  );
};

export default Toast;

⚙️ 2. Use It in Your App

import { useState } from 'react';
import Toast from './Toast';

function App() {
  const [showToast, setShowToast] = useState(false);

  const handleClick = () => {
    setShowToast(true);
    setTimeout(() => setShowToast(false), 3000); // auto-hide after 3s
  };

  return (
    <div>
      <button onClick={handleClick}>Show Toast</button>
      {showToast && <Toast message="Hello from a portal!" />}
    </div>
  );
}

export default App;

🎯 Why Use React Portals?

Common UI Problem	Portals to the Rescue
Modal hidden behind elements	✅ Portals escape stacking issues
`z-index` or `overflow: hidden` problems	✅ Fixed by rendering outside the DOM tree
Need to float UI anywhere on the page	✅ Portals let you place UI wherever you want

⚠️ Tips to Use Portals Effectively

You don’t need to create a special div like #portal-root — just use document.body.
Use portals for things like modals, tooltips, toasts, and dropdowns.
Don’t overuse them — keep your DOM clean and structured.

🏁 Final Thoughts

React Portals are like teleporters 🌀 — they let your components break free from the regular DOM structure, while still staying connected to React’s state and event system.

They solve tons of real-world UI problems in a simple way.

If you’re building floating elements or overlays — React Portals are your best friend.

💬 Have a question or want a working demo with modals or tooltips? Drop a comment below!

❤️ If you found this helpful, leave a like and share it with a fellow dev.

🖖 Happy coding!

DEV Community