Breaking News: Grepper is joining You.com. Read the official announcement!

React Portal code snippet

M Hassan khan answered on December 28, 2022 Popularity 10/10 Helpfulness 2/10

answer React Portal code snippet

React Portal code snippet

Comment

/*
Another nice feature of React is something called a Portal.
You can think of the portal as a separate mount point
(the actual DOM node which your app is put into) for your React app. 

A common use case for this is going to be doing modals. 
You'll have your normal app with its normal mount point and 
then you can also put different content into a separate mount
point (like a modal or a contextual nav bar) directly from a component.

Pretty cool!

First thing, let's go into index.html and add a separate mount point:

*/

//  Paste it above #root div
<div id="modal"></div>
/*
This where the modal will actually be mounted whenever we render 
to this portal. Totally separate from our app root.

Next create a file called Modal.jsx:
*/
import React, { useEffect, useRef } from "react";
import { createPortal } from "react-dom";

const Modal = ({ children }) => {
  const elRef = useRef(null);
  if (!elRef.current) {
    elRef.current = document.createElement("div");
  }

  useEffect(() => {
    const modalRoot = document.getElementById("modal");
    modalRoot.appendChild(elRef.current);
    return () => modalRoot.removeChild(elRef.current);
  }, []);

  return createPortal(children, elRef.current);
};

export default Modal;

// Now go to the component where you want to render Modal


const Example = ()=>{
// at the top
import { useState } from "react";
import Modal from "./Modal";

// add showModal
const [showModal, setShowModal] = useState(false);

// add onClick to <button>
<button onClick={() => setShowModal(true)}>Adopt Pet.</button>;


{
  showModal ? (
    <Modal>
      <div>
        <h1>Would you like to adopt Pet?</h1>
        <div className="buttons">
          <button>Yes</button>
          <button onClick={() => setShowModal(false)}>No</button>
        </div>
      </div>
    </Modal>
  ) : null

}

/*
Notice that despite we're rendering a whole different part
of the DOM we're still referencing the state in Example.jsx.
This is the magic of Portals. You can use state but render
in different parts of the DOM.

Imagine a sidebar with contextual navigation. Or a contextual footer.
It opens up a lot of cool possibilities. 

React Router has some cool features built into that take 
advantage of this as well.


That's it! 
That's how you make a modal using a portal in React. 
This used to be significantly more difficult to do
but with portals it became trivial. 

The nice thing about portals is that despite the actual 
elements being in different DOM trees, 
these are in the same React trees, so you can do event bubbling
up from the modal. Some times this is useful if you want
to make your Modal more flexible (like we did.)
*/

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript portal react-modal react-portal using

Link to this answer
Share Copy Link

Contributed on Dec 28 2022

M Hassan khan

0 Answers Avg Quality 2/10

React Portal code snippet

Contents

More Related Answers

React Portal code snippet

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.