Create React Modal with 22 lines of code
Tags: react, reactmodal, modal
Published: 2019-06-25 10:34:50

---
title: Create React Modal with 22 lines of code
published: true
description: Create React Modal with 22 lines of code: Nowadays, Modals are one of the most used components in React Application.we will build A simple React Modal using only 22 lines of code. 
tags: react, react-modal,modal
---


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 

  ![](https://thepracticaldev.s3.amazonaws.com/i/6qkllsnpuzmoj4sn6cxx.gif)


> Let's started 

### Create React Project 

First, create a simple react project using create-react-app cli

```
npx  Create-react-app  SimpleModal 
```


```jsx
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](https://react-popup.elazizi.com/) 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.

```
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.



```jsx
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);
```

![](https://thepracticaldev.s3.amazonaws.com/i/2c15yz37y11softwga34.gif)


### Customizing and Styling  React Modal 

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

```jsx
//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>
);


``` 
```css
/* 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.


```jsx
//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);
``` 

### 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

![](https://thepracticaldev.s3.amazonaws.com/i/6qkllsnpuzmoj4sn6cxx.gif)

Make sure to visit [react-popup home page](https://react-popup.elazizi.com/)

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

Remember to follow me, so you can get notified about my future posts.