diff --git a/client/src/pages/Notes/ReactPatterns/ReactNotes/PortalPattern.jsx b/client/src/pages/Notes/ReactPatterns/ReactNotes/PortalPattern.jsx new file mode 100644 index 0000000..f875a6d --- /dev/null +++ b/client/src/pages/Notes/ReactPatterns/ReactNotes/PortalPattern.jsx @@ -0,0 +1,159 @@ +import React from "react"; +import CodeBlock from "../../components/CodeBlock"; + +const PortalPattern = () => { + const examples = [ + { + title: "Basic React Portal", + code: `import React from "react"; +import ReactDOM from "react-dom"; + +function Modal({ children }) { + return ReactDOM.createPortal( +
{children}
, + document.getElementById("modal-root") + ); +} + +function App() { + return ( +
+

App Content

+ +

This is rendered in a portal!

+ +
+ ); +} + +export default App;`, + explanation: + "React Portals allow you to render a component's children into a DOM node that exists outside the main DOM hierarchy of the parent component.", + }, + { + title: "Using Portals for Modals", + code: `function App() { + return ( +
+

Website Content

+ +
+

Modal Header

+

Modal content rendered using portal.

+
+ +
+ ); +}`, + explanation: + "Portals are especially useful for modals, tooltips, and dropdowns to escape overflow or z-index issues and render at the top-level of the DOM.", + }, + ]; + + const bestPractices = [ + "Use portals for components that need to visually break out of parent container constraints.", + "Keep portal usage limited to UI overlays like modals, tooltips, or context menus.", + "Ensure proper cleanup of event listeners or side effects in portal components.", + ]; + + const commonMistakes = [ + "Rendering everything in a portal unnecessarily.", + "Forgetting to provide a DOM element to attach the portal.", + "Not handling z-index or focus management correctly for modals.", + ]; + + return ( +
+

+ React{" "} + + Portals + +

+ +
+

+ React Portals provide a way to render children into a + DOM node outside of the parent component’s DOM hierarchy. This is + helpful for UI elements like modals, tooltips, and overlays. +

+ +
+

+ Tip: Use portals when + you need components to escape overflow, z-index, or stacking + context issues. +

+
+ + {/* Examples Section */} +
+

+ Examples +

+
+ {examples.map((ex, i) => ( +
+

+ {ex.title} +

+
+ +
+

+ {ex.explanation} +

+
+ ))} +
+
+ + {/* Best Practices */} +
+

+ Best Practices +

+
    + {bestPractices.map((practice, index) => ( +
  • + {practice} +
    • + ))} +
+
+ + {/* Common Mistakes */} +
+

+ Common Mistakes +

+
    + {commonMistakes.map((mistake, index) => ( +
  • + {mistake} +
    • + ))} +
+
+ + {/* Summary */} +
+

+ Summary +

+

+ React Portals allow components to render outside their parent + hierarchy, solving overflow and z-index issues. Use them for + modals, tooltips, and overlays for clean and predictable UI + rendering. +

+
+
+
+ ); +}; + +export default PortalPattern; diff --git a/client/src/pages/Notes/ReactPatterns/ReactSidebarPage.jsx b/client/src/pages/Notes/ReactPatterns/ReactSidebarPage.jsx index fcae0b5..8c22db9 100644 --- a/client/src/pages/Notes/ReactPatterns/ReactSidebarPage.jsx +++ b/client/src/pages/Notes/ReactPatterns/ReactSidebarPage.jsx @@ -34,6 +34,9 @@ import CompoundComp from "./ReactNotes/CompoundComp"; import Props from "./ReactNotes/Props"; import HOC from "./ReactNotes/HOC"; + +import PortalPattern from "./ReactNotes/PortalPattern"; + import CodeSplitting from "./ReactNotes/CodeSplitting"; import SuspensePattern from "./ReactNotes/SuspensePattern"; @@ -59,6 +62,7 @@ import RenderOptimization from "./ReactNotes/RenderOptimization"; + const iconMap = { "React Basics": , "React Patterns": , @@ -125,6 +129,10 @@ const topicComponents = { "What is react" : , + "What is react" : , + + + @@ -151,6 +159,11 @@ const topicComponents = { "Suspense Pattern": + + + + + "Portal Pattern" : , // add all other topics here };