Create React Modal using reactjs-popup

Originally published by youssoufelazizi at hackernoon.com

In this tutorial, we will build A simple React Modal using only 22 lines of code.

The gif below will help you understand what we are trying to build

Let's started

Create React Project

First, create a simple react project using create-react-app CLI.

$ npx Create-react-app SimpleModal

import React from "react";
import ReactDOM from "react-dom";
 
import "./styles.css";
 
function App() {
 return (
    <div className="App">
      <h1>Create React Modal in X line of code </h1>
      <button>Click Me</button>
    </div>
  );
}
 
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In this tutorial, we will use the react-popup package which is a simple and Powerful react component with a lot of benefits :

Modal, Tooltip, Menu: All in one
Full style customization
Function as children pattern to take control over your popup anywhere in your code.
IE Support.
TypeScript Support
All these clocks in at around 3 kB zipped.

This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers.

$ yarn add reactjs-popup

Create React Modal

Import Popup Component from reactjs-popup and start using it like the following.

Add trigger property as a simple React Button element and set modal property to true.

import React from "react";
import ReactDOM from "react-dom";
import Popup from "reactjs-popup";
 
import "./styles.css";
 
function App() {
 return (
    <div className="App">
      <h1>Create React Modal with 22 line of code </h1>
      <Popup modal trigger={<button>Click Me</button>}>
        Modal Content
      </Popup>
    </div>
  );
}
 
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Customizing and Styling React Modal

we need to create a Content.js file for Modal Content component and add some style

//content.js
import React from "react";
 
export default ({ close }) => (
 <div className="modal">
    <a className="close" onClick={close}>
      &times;
    </a>
    <div className="header"> Modal Title </div>
    <div className="content">
      {" "}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet
      dignissimos?
      <br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
      commodi beatae optio voluptatum sed eius cumque, delectus saepe
      repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias.
      Vitae?
    </div>
  </div>
);

/* index.css */
.modal {
 font-size: 12px;
}
.modal > .header {
 width: 100%;
 border-bottom: 1px solid gray;
 font-size: 18px;
 text-align: center;
 padding: 5px;
}
.modal > .content {
 width: 100%;
 padding: 10px 5px;
}
.modal > .actions {
 margin: auto;
}
.modal > .actions {
 width: 100%;
 padding: 10px 5px;
 text-align: center;
}
.modal > .close {
 cursor: pointer;
 position: absolute;
 display: block;
 padding: 2px 5px;
 line-height: 20px;
 right: -10px;
 top: -10px;
 font-size: 24px;
 background: #ffffff;
 border-radius: 18px;
 border: 1px solid #cfcece;
}

Now it's time for some magic

Because reactjs-popup provides a child as function pattern, you have full control on Popup state

we will update our example to use a function as a child instead of a react element to implement `close` button.

 //index.js
import React from "react";
import ReactDOM from "react-dom";
import Popup from "reactjs-popup";
 
import Content from "./Content.js";
import "./styles.css";
 
function App() {
 return (
    <div className="App">
      <h1>Create React Modal with 22 line of code </h1>
      <Popup modal trigger={<button>Click Me</button>}>
        {close => <Content close={close} />}
      </Popup>
    </div>
  );
}
 
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);