This week we'll be making a modal popup, we'll be making it using portals and inert. Both of which are very cool in their own right. I'll be making a portal component we can use to help with the modal, but I'll try and make it in such a way it's helpful for future projects too.

Here's what we're going to make.

Portals

What are portals? Portals are a way to render children into a DOM node anywhere within your app, be it straight into the body or into a specific container.

How is that useful? Specifically in our component it means we can have our <Modal> component anywhere and append the content to the end of the body so it's always over the top of everything. It will also be helpful with setting inert on everything except our <Modal>.

How do I use it? Portals are on ReactDOM you call the function createPortal. This function takes 2 parameters the child, element(s) to spawn, and the container, where to spawn them. Generally you'd expect it to look a little something like this.

return ReactDOM.createPortal(
  this.props.children,
  document.body
);

Portal Component

I'm going to take the relatively simple createPortal and add a layer of complexity and contain it within a component. Hopefully this will make using the <Portal> easier down the line.

Let's dive into the code.

// imports
import React from "react";
import ReactDOM from "react-dom";

// export function
// get parent and className props as well as the children
export default function Portal({ children, parent, className }) {
  // Create div to contain everything
  const el = React.useMemo(() => document.createElement("div"), []);
  // On mount function
  React.useEffect(() => {
    // work out target in the DOM based on parent prop
    const target = parent && parent.appendChild ? parent : document.body;
    // Default classes
    const classList = ["portal-container"];
    // If className prop is present add each class the classList
    if (className) className.split(" ").forEach((item) => classList.push(item));
    classList.forEach((item) => el.classList.add(item));
    // Append element to dom
    target.appendChild(el);
    // On unmount function
    return () => {
      // Remove element from dom
      target.removeChild(el);
    };
  }, [el, parent, className]);
  // return the createPortal function
  return ReactDOM.createPortal(children, el);
}

Inert

What is inert? Inert is a way to let the browser know an element, and it's children, should not be in the tab index nor should it appear in a page search.

How is that useful? Again looking at our specific needs it means the users interactions are locked within the <Modal> so they can't tab around the page in the background.

How do I use it? Inert only works in Blink browsers, Chrome, Opera and Edge, at the moment but it does have a very good polyfill. Once the polyfill is applied you simply add the inert keyword to the dom element.

<aside inert class="side-panel" role="menu"></aside>

const sidePanel = document.querySelector('aside.side-panel');
sidePanel.setAttribute('inert', '');
sidePanel.removeAttribute('inert');

Modal

Now let's put it all together, I'll break the code down into 3 sections styles, events + animations and JSX.

Styles

I'm using styled-components, I'm not really going to comment this code just let you read through it. It's really just CSS.

const Backdrop = styled.div`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.3);
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 200ms;
  display: flex;
  align-items: center;
  justify-content: center;

  & .modal-content {
    transform: translateY(100px);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
  }

  &.active {
    transition-duration: 250ms;
    transition-delay: 0ms;
    opacity: 1;

    & .modal-content {
      transform: translateY(0);
      opacity: 1;
      transition-delay: 150ms;
      transition-duration: 350ms;
    }
  }
`;

const Content = styled.div`
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  min-height: 50px;
  min-width: 50px;
  max-height: 80%;
  max-width: 80%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background-color: white;
  border-radius: 2px;
`;

Events + Animations

// set up active state
const [active, setActive] = React.useState(false);
// get spread props out variables
const { open, onClose, locked } = props;
// Make a reference to the backdrop
const backdrop = React.useRef(null);

// on mount
React.useEffect(() => {
  // get dom element from backdrop
  const { current } = backdrop;
  // when transition ends set active state to match open prop
  const transitionEnd = () => setActive(open);
  // when esc key press close modal unless locked
  const keyHandler = e => !locked && [27].indexOf(e.which) >= 0 && onClose();
  // when clicking the backdrop close modal unless locked
  const clickHandler = e => !locked && e.target === current && onClose();

  // if the backdrop exists set up listeners
  if (current) {
    current.addEventListener("transitionend", transitionEnd);
    current.addEventListener("click", clickHandler);
    window.addEventListener("keyup", keyHandler);
  }

  // if open props is true add inert to #root
  // and set active state to true
  if (open) {
    window.setTimeout(() => {
      document.activeElement.blur();
      setActive(open);
      document.querySelector("#root").setAttribute("inert", "true");
    }, 10);
  }

  // on unmount remove listeners
  return () => {
    if (current) {
      current.removeEventListener("transitionend", transitionEnd);
      current.removeEventListener("click", clickHandler);
    }

    document.querySelector("#root").removeAttribute("inert");
    window.removeEventListener("keyup", keyHandler);
  };
}, [open, locked, onClose]);

JSX

The main thing to see here is (open || active) this means if the open prop or the active state are true then the portal should create the modal. This is vital in allowing the animations to play on close.

Backdrop has className={active && open && "active"} which means only while the open prop and active state are true the modal will be active and animate into view. Once either of these become false the modal will animate away for our transition end to pick up.

return (
  <React.Fragment>
    {(open || active) && (
      <Portal className="modal-portal">
        <Backdrop ref={backdrop} className={active && open && "active"}>
          <Content className="modal-content">{props.children}</Content>
        </Backdrop>
      </Portal>
    )}
  </React.Fragment>
);

Fin

And that's a modal popup in ReactJS, I hope you found this helpful and maybe have something to take away. As always I'd love to see anything you've made and would love to chat down in the comments. If I did anything you don't understand feel free to ask about it also if I did anything you think I could have done better please tell me.

Thank you so much for reading!
🦄❤️🤓🧠❤️💕🦄🦄🤓🧠🥕

Blog

React: Using portals to make a modal popup

Andrew Bone