DEV Community

Cover image for React-cool-portal: What it is and how to use it
Brian Neville-O'Neill
Brian Neville-O'Neill

Posted on • Originally published at blog.logrocket.com on

React-cool-portal: What it is and how to use it

Written by Yusuff Faruq✏️

If you’re familiar with React, you are most likely already aware of the fact that React renders all the HTML elements under a single div tag, often given an ID of root.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
Enter fullscreen mode Exit fullscreen mode

This can be annoyingly restrictive if you are trying to render another element, such as a modal or a tooltip, outside the root element. In a bid to solve this problem, React portals were introduced.

Introducing React portals

In version 16.0 of React, portals were introduced to solve the inability to render other elements outside the root node.

Here is an example from the React docs on how to make use of React portals:

const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
  }
  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {clicks: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This will fire when the button in Child is clicked,
    // updating Parent's state, even though button
    // is not direct descendant in the DOM.
    this.setState(state => ({
      clicks: state.clicks + 1
    }));
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <p>Number of clicks: {this.state.clicks}</p>
        <p>
          Open up the browser DevTools
          to observe that the button
          is not a child of the div
          with the onClick handler.
        </p>
        <Modal>
          <Child />
        </Modal>
      </div>
    );
  }
}

function Child() {
  // The click event on this button will bubble up to parent,
  // because there is no 'onClick' attribute defined
  return (
    <div className="modal">
      <button>Click</button>
    </div>
  );
}

ReactDOM.render(<Parent />, appRoot);
Enter fullscreen mode Exit fullscreen mode

As you can see, the code is a little verbose and could be more readable and understandable if its length were reduced. Fast-forward to the introduction of Hooks in React version 16.8.

Hooks allow developers to reuse stateful logic without changing component hierarchy. They have changed the way React developers write code and compose state. In fact, many React libraries, such as react-redux and react-router, are moving — or have already moved — towards a more Hooks-based API.

Many new Hooks-based libraries are also being released to provide some abstraction over certain services or code. One such library is react-cool-portal. In this article, we will explore react-cool-portal, and by the end, we will have built an animated modal. Let’s get started!

LogRocket Free Trial Banner

What is react-cool-portal?

Like I mentioned earlier, react-cool-portal is a Hooks-based abstraction over React portals. With react-cool-portal, creating a portal is as simple as:

const {Portal} = usePortal();
Enter fullscreen mode Exit fullscreen mode

The Hook also comes with various methods and event listeners that allow you to perform more flexible operations. Here are some of the features of react-cool-portal:

  • You have the ability to render an element/component to a default element in the <body> or to a specified DOM element
  • react-cool-portal comes with various state controllers and event listeners that allow you to handle your portals more flexibly
  • It can be used as a wrapper to build your custom Hook
  • It automatically removes unused portal containers for you, thereby preventing DOM mess
  • It supports TypeScript type definitions
  • It has server-side rendering compatibility
  • It has a tiny size (~ 1.4KB gzipped) with no external dependencies, aside from react and react-dom

In this article, we will explore react-cool-portal, and by the end, we will have built an animated modal. Let’s get started!

Exploring react-cool-portal

As I mentioned earlier, you can create a portal with the usePortal Hook. usePortal returns an object that contains the Portal component and some functions:

const {Portal, show, hide, isShow, toggle} = usePortal();
Enter fullscreen mode Exit fullscreen mode

The show function is used to show the portal (mount it) while hide is used to hide it (unmount it). isShow is a Boolean, which returns true when the portal is mounted and false if otherwise. toggle is a function that can be used to show or hide the portal depending on the portal’s current state.

We can provide an argument in the form of an object to our usePortal Hook for further configuration, like so:

const {Portal} = usePortal({
  defaultShow: false,
  internalShowHide: true,
  onShow : e => {
  },
  onHide: e => {
  },
  containerId: "portal",
  clickOutsideToHide: true,
  escToHide: true
});
Enter fullscreen mode Exit fullscreen mode

With defaultShow, we can choose to show or hide our portal’s content by default. internalShowHide enables/disables the show/hide functions of our portal so we can handle the portal however we like.

onShow and onHide are event handlers that are triggered when isShow is set to true or when isShow is set to false, respectively. containerId, which has a default value of react-cool-portal, is used to set the ID of the portal.

clickOutsideToHide defines whether we want to hide the portal by clicking outside of it, while escToHide defines whether we want to hide the portal by clicking the esc key.

That’s basically all you need to know to start using react-cool-portal! Now we will build an animated modal with what we have learned so far.

Building an animated modal

As with any React project, you have to create a new project before you start working. You can easily use create-react-app for that:

npx create-react-app animated-modal
Enter fullscreen mode Exit fullscreen mode

Once you have created a new project, you need to install react-cool-portal, like so:

npm install --save react-cool-portal
Enter fullscreen mode Exit fullscreen mode

Since this is a pretty small project, I will write all my JavaScript/JSX in one file, App.js, and all my CSS in another file, App.css.

Before we continue, let’s picture what we want to create. We want to have a button that, when clicked, will display an animated modal. We can then exit the modal from the modal itself.

That said, we need to create a piece of state that renders the Portal component depending on whether or not the button has been clicked:

const [showModal, setShowModal] = useState(false);
Enter fullscreen mode Exit fullscreen mode

We also need another piece of state to store the animation state (the different CSS classes that will trigger the animation):

const [animationState, setAnimationState] = useState("");
Enter fullscreen mode Exit fullscreen mode

We should have this currently:

const { Portal, show, hide } = usePortal({
    defaultShow: false,
  });
  const [showModal, setShowModal] = useState(false);
  const [animationState, setAnimationState] = useState("");
Enter fullscreen mode Exit fullscreen mode

Now let’s create our simple button element, which will set showModal to true when clicked and which will call the show function.

return (
    <div>
      <button
        onClick={() => {
          setShowModal(true);
          show();
        }}
      >
        Open Modal
      </button>    
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

Now let’s write the modal markup:

return (
    <div>
      <button
        onClick={() => {
          setShowModal(true);
          show();         
        }}
      >
        Open Modal
      </button>
      {showModal && (
        <Portal>
          <div className= "modal" tabIndex={-1}>
            <div
              className={`modal-dialog ${animationState}`}
              role="dialog"
              aria-labelledby="modal-label"
              aria-modal="true"
            >
              <div className="modal-header">
                <h5 id="modal-label">Modal header</h5>
                <span
                  className="modal-exit"
                >
                  close
                </span>
              </div>
              <div className="modal-body">
                <p>Modal Body</p>
              </div>
            </div>
          </div>
        </Portal>
      )}
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

In our CSS, we are going to have two different animations: slideIn and slideOut. When the button is clicked to open the modal, the animation state is changed to slideIn, and the slideIn class is attached to the modal dialog div.

To do this, we will use the onShow event handler to set the current animation state to slideIn. So anytime the modal is displayed, the slideIn class will be attached to it.

const { Portal, show, hide } = usePortal({
    defaultShow: false,
    onShow: () => {
      setAnimationState("slideIn");
    },
  });
Enter fullscreen mode Exit fullscreen mode

Our modal has a <span> element that will be used to close the modal when clicked. When this <span> element is clicked, we will set the animation state to slideOut.

<span
  className="modal-exit"
  onClick={() => {
    setAnimationState("slideOut");
  }}
>
 close
</span>
Enter fullscreen mode Exit fullscreen mode

We will now make use of one of the animation events that React provides: onAnimationEnd. The event handler passed to it will run once the animation has ended.

In our case, once the animation on the modal dialog has ended, we will check the current animation state. If it is slideOut, we will hide the modal. Once that’s done, we will set the animation state to an empty string.

 <div
  className={`modal-dialog ${animationState}`}
   role="dialog"
   aria-labelledby="modal-label"
   aria-modal="true"
    onAnimationEnd={() => {
       if(animationState == "slideOut"){
          hide();
        }
        setAnimationState("");
    }}
 >
Enter fullscreen mode Exit fullscreen mode

Our App component should now look like this:

import React, { useState } from "react";
import "./App.css";
import usePortal from "react-cool-portal";

function App() {
  const { Portal, show, hide } = usePortal({
    defaultShow: false,
    onShow: () => {
      setAnimationState("slideIn");
    },
  });
  const [showModal, setShowModal] = useState(false);
  const [animationState, setAnimationState] = useState("");
  return (
    <div>
      <button
        onClick={() => {
          setShowModal(true);
          show(); 
        }}
      >
        Open Modal
      </button>
      {showModal && (
        <Portal>
          <div className= "modal" tabIndex={-1}>
            <div
              className={`modal-dialog ${animationState}`}
              role="dialog"
              aria-labelledby="modal-label"
              aria-modal="true"
              onAnimationEnd={() => {
                if(animationState == "slideOut"){
                  hide();
                }
                setAnimationState("");
              }}
            >
              <div className="modal-header">
                <h5 id="modal-label">Modal header</h5>
                <span
                  className="modal-exit"
                  onClick={() => {
                    setAnimationState("slideOut");
                  }}
                >
                  close
                </span>
              </div>
              <div className="modal-body">
                <p>Modal Body</p>
              </div>
            </div>
          </div>
        </Portal>
      )}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

That’s it for the JavaScript — let’s move on to the the CSS. This is the CSS for the modal:

body{
  --curve: cubic-bezier(0.22, 1, 0.36, 1);
}
#react-cool-portal{
  position: absolute;
  top:0;
  left: 0;
  min-width: 100vw;
  height: 100%;
}
.modal{
  height: 100%;
  width: 100%;
  display: flex;
  z-index: 20;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.7);
}
.modal-dialog{
  background-color: white;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
  padding: 1rem;

}
.modal-header{
  font-weight: 400;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
}
.modal-header #modal-label{
  margin:0;
}
.modal-exit{
  font-size: 1rem;
  color: red;
  cursor: pointer;
}
.slideIn{
  animation: slideIn 0.5s var(--curve) 0s 1 normal none;
}
.slideOut{
  animation: slideOut 0.5s var(--curve) 0s 1 normal forwards;
}
@keyframes slideIn {
  0% {
    transform: translateY(-2rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  100% {
    transform: translateY(-2rem);
    opacity: 0;
  }
  0% {
    transform: translateY(0);
    opacity: 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

You should now have a nicely animated modal!

Conclusion

With that, we’re done! You can create a custom Hook called useModal based on react-cool-portal for code reusability.

The link to the repo for this project can be found here. You can find the live demo here. And, finally, you can learn more about react-cool-portal here.


Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

Alt Text

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.


The post React-cool-portal: What it is and how to use it appeared first on LogRocket Blog.

Top comments (0)