Create React Modal with 22 lines of code

Youssouf El Azizi

โ€”

June 25, 2019

elazizi, dev, react

Nowadays, Modals are one of the most used components in React Application, having an easy way to create React Modals will help you sheep Modals related features fast in your upcoming React Applications. 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

1npx Create-react-app SimpleModal
1import React from "react";
2import ReactDOM from "react-dom";
3
4import "./styles.css";
5
6function App() {
7 return (
8 <div className="App">
9 <h1>Create React Modal in X line of code </h1>
10 <button>Click Me</button>
11 </div>
12 );
13}
14
15const rootElement = document.getElementById("root");
16ReactDOM.render(<App />, rootElement);

In this tutorial, we will use the react-popup package which is a simple and Powerfull 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.

1yarn 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.

1import React from "react";
2import ReactDOM from "react-dom";
3import Popup from "reactjs-popup";
4
5import "./styles.css";
6
7function App() {
8 return (
9 <div className="App">
10 <h1>Create React Modal with 22 line of code </h1>
11 <Popup modal trigger={<button>Click Me</button>}>
12 Modal Content
13 </Popup>
14 </div>
15 );
16}
17
18const rootElement = document.getElementById("root");
19ReactDOM.render(<App />, rootElement);

Customizing and Styling React Modal

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

1//content.js
2import React from "react";
3
4default ({ close }) => (
5 <div className="modal">
6 <a className="close" onClick={close}>
7 &times;
8 </a>
9 <div className="header"> Modal Title </div>
10 <div className="content">
11 {" "}
12 Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
13 Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates delectus
14 doloremque, explicabo tempore dicta adipisci fugit amet dignissimos?
15 <br />
16 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit commodi
17 beatae optio voluptatum sed eius cumque, delectus saepe repudiandae explicabo
18 nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
19 </div>
20 </div>
21);
1/* index.css */
2.modal {
3 font-size: 12px;
4}
5.modal > .header {
6 width: 100%;
7 border-bottom: 1px solid gray;
8 font-size: 18px;
9 text-align: center;
10 padding: 5px;
11}
12.modal > .content {
13 width: 100%;
14 padding: 10px 5px;
15}
16.modal > .actions {
17 margin: auto;
18}
19.modal > .actions {
20 width: 100%;
21 padding: 10px 5px;
22 text-align: center;
23}
24.modal > .close {
25 cursor: pointer;
26 position: absolute;
27 display: block;
28 padding: 2px 5px;
29 line-height: 20px;
30 right: -10px;
31 top: -10px;
32 font-size: 24px;
33 background: #ffffff;
34 border-radius: 18px;
35 border: 1px solid #cfcece;
36}

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.

1//index.js
2import React from "react";
3import ReactDOM from "react-dom";
4import Popup from "reactjs-popup";
5
6import Content from "./Content.js";
7import "./styles.css";
8
9function App() {
10 return (
11 <div className="App">
12 <h1>Create React Modal with 22 line of code </h1>
13 <Popup modal trigger={<button>Click Me</button>}>
14 {close => <Content close={close} />}
15 </Popup>
16 </div>
17 );
18}
19
20const rootElement = document.getElementById("root");
21ReactDOM.render(<App />, rootElement);

Final Result

reactjs-popup : https://react-popup.elazizi.com/ repo : https://github.com/yjose/create-react-modal-with-22-line-of-code codesandbox :https://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t

Make sure to visit react-popup home page

Thanks for reading! If you think other people should read this post and use this project, tweet, and share the post.

Share article