Add a Modal to a React App with Rodal and Reactjs-popup

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 Rodal and Reactjs-popup libraries.

Rodal

We can add the Rodal library by running:

npm i rodal --save

Then we can use it by writing:

import React, { useState } from "react";
import Rodal from "rodal";
import "rodal/lib/rodal.css";

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <div>
        <button onClick={() => setVisible(true)}>show</button>

        <Rodal visible={visible} onClose={() => setVisible(false)}>
          <div>Content</div>
        </Rodal>
      </div>
    </div>
  );
}

We import the Rodal library with its styles.

Then we set the visible prop to the visible state so that we can control when it’s shown.

We set visible to true to show the modal.

onClose is run when we click the close button.

In it, we call setVisible with false to close the modal.

It has many other options available as props.

width sets the wdith. height sets the hrigjt.

showMask controls whether we show a mask.

animation sets the animation type.

enterAnimation and leaveAnimation sets the animation for when the modal is shown or hidden..

duration sets the duration of the animation.

closeOnEsc lets us close the modal when we press escape.

For example, we can use some of them by writing:

import React, { useState } from "react";
import Rodal from "rodal";
import "rodal/lib/rodal.css";

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <div>
        <button onClick={() => setVisible(true)}>show</button>

        <Rodal
          enterAnimation="zoom"
          leaveAnimation="zoom"
          closeOnEsc
          visible={visible}
          onClose={() => setVisible(false)}
        >
          <div>Content</div>
        </Rodal>
      </div>
    </div>
  );
}

Other animation types available include:

• fade
• flip
• door
• rotate
• slideUp
• slideDown
• slideLeft
• slideRight

Reactjs-popup

The Reactjs-popup library lets us add a popup that’s attached to a trigger element.

To install it, we run:

npm i reactjs-popup

Then we can use it by writing:

import React from "react";
import Popup from "reactjs-popup";
import "reactjs-popup/dist/index.css";

export default function App() {
  return (
    <div>
      <div>
        <Popup trigger={<button> Trigger</button>} position="right center">
          <div>Popup content here !!</div>
        </Popup>
      </div>
    </div>
  );
}

We import the Popup component with the associated styles.

Then we set the trigger prop to the trigger element.

position lets us set the position of the popup with a string.

We can add whatever content we want between the tags.

We can also use it to open a modal by adding the modal prop:

import React from "react";
import Popup from "reactjs-popup";
import "reactjs-popup/dist/index.css";

export default function App() {
  return (
    <div>
      <div>
        <Popup trigger={<button> Trigger</button>} modal nested>
          {(close) => (
            <div className="modal">
              <button className="close" onClick={close}>
                &times;
              </button>
              <div className="header"> Modal Title </div>
              <div className="content">Lorem ipsum</div>
              <div className="actions">
                <Popup
                  trigger={<button className="button"> Trigger </button>}
                  position="top center"
                  nested
                >
                  <span>Lorem ipsum</span>
                </Popup>
                <button
                  className="button"
                  onClick={() => {
                    console.log("modal closed ");
                    close();
                  }}
                >
                  close modal
                </button>
              </div>
            </div>
          )}
        </Popup>
      </div>
    </div>
  );
}

The close function is available to let us close the modal.

The nested prop lets us open another modal in the modal.

Conclusion

We can add modals into our React app with the Rodal and react-popup libraries.