react-overlays — Modal Transitions

Modals are something that we have to add often into our React app.

To make this task easier, we can use existing component libraries to add them.

In this article, we’ll look at how to add a modal into our React app with the react-overlays library.

Modal Transitions

We can add transition effects when we open a react-overlays modal.

For instance, we can write:

styles.css

.fade {
  opacity: 0;
  transition: opacity 500ms linear;
}

.show {
  opacity: 1;
}

.backdrop.fade.show {
  opacity: 0.5;
}

.dialog {
  position: absolute;
  width: 400;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  padding: 20px;
}

App.js

import React, { useState } from "react";
import { Transition } from "react-transition-group";
import styled from "styled-components";
import Modal from "react-overlays/Modal";
import "./styles.css";
const FADE_DURATION = 500;

const AModal = styled(Modal)`
  position: fixed;
  width: 400px;
  z-index: 1040;
  top: 20px;
  left: 30px;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  padding: 20px;
`;

const fadeStyles = {
  entering: "show",
  entered: "show"
};

const Fade = ({ children, ...props }) => (
  <Transition {...props} timeout={FADE_DURATION}>
    {(status, innerProps) =>
      React.cloneElement(children, {
        ...innerProps,
        className: `fade ${fadeStyles[status]} ${children.props.className}`
      })
    }
  </Transition>
);

export default function App() {
  const [showModal, setShowModal] = useState(false);

return (
    <div className="flex flex-col items-center">
      <button
        type="button"
        className="btn btn-primary mr-3"
        onClick={() => setShowModal((prev) => !prev)}
      >
        Show Animated Modal
      </button>
      <AModal
        show={showModal}
        onHide={() => setShowModal(false)}
        transition={Fade}
        backdropTransition={Fade}
        renderBackdrop={(props) => (
          <div {...props} className="backdrop absolute inset-0 bg-black z-40" />
        )}
        renderDialog={(props) => (
          <div
            {...props}
            className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none"
          >
            <div className="dialog bg-white shadow rounded-lg pointer-events-auto">
              <h4 id="modal-label">I&apos;m fading in!</h4>
              <p>Anim pariatur</p>
              <button
                type="button"
                className="btn"
                onClick={() => setShowModal(false)}
              >
                Close
              </button>
            </div>
          </div>
        )}
      />
    </div>
  );
}

We create the modal with styled-component’s styled function.

We pass in the Modal component from the react-overlays library to create the modal with our own styles.

Also, we set the styles for fading with the fadeStyles object.

We set the fade effect to show during animation.

Then in App , we add the button to let us open the modal by calling setShowModal to true .

We render the items in the modal with the renderDialog prop.

It has a function that returns a component as the value.

Conclusion

We can add transition effects when modals are open when we use react-overlays to add our modal.