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!
🦄❤️🤓🧠❤️💕🦄🦄🤓🧠🥕
Top comments (14)
Nice! We use portals on DEV as well. For the moment, just in the moderation center though.
github.com/forem/forem/blob/master...
Looking forward to your next post Andrew!
The DEV codebase looks so different to when I used to know it 😅
I've been looking at crayons a little today, some really nice stuff in there 😁
Crayons is the code name for our design system. You can see our work in progress Storybook at storybook.dev.to. I thought storybook.forem.com was working, but looks like some DNS stuff needs to be sorted in Netlify.
We also have a bunch of Tailwind inspired utility classes. However, they are not surfaced in documentation at the moment. This PR fixes that.
You can see the utility class docs in the Storybook for the PR.
I'm implementing this using typescript and the latest nextjs 13. Two things:
{ children: React.ReactNode, parent: React.ReactNode, className: string}but I see that the parent type is still wrong as React.ReactNode doesn't have the appendChild property or method.Great piece @link2twenty, Thank you.
@link2twenty , thank you for interesting article
I have a question.
Why you are using
instead of
?
It's for future proofing, whenever I want a specific key I do it that way so I can add extra keys to the array down the line.
For instance if I wanted to add the enter key I would do this.
[27, 13].indexOf(e.which)That is a really nice blog. I actually wanted to learn on making a popup form on react portal popup. How can we do that ? Do you hav any idea
You can use this code and pass in a form as the child.
The method is techically correct but not "REACT esk". If I would use, say email and password field, in the form and make it a controlled component by putting value and setValue. Each time the state changes due to onChange, the code freezes for split second and UX will be poor
That's React's official documentation. A redraw, due to state change, should not cause anything to freeze.
Here's an example
Very nice the idea of wrapping the createPortal call in a component to allow the animation! I'll definitely use it.
In this code it needs to be an HTMLElement, I would generally use ref.