Easy React Modal with Tailwindcss 😎

Mustafa Al Ajmi — Sat, 13 May 2023 08:26:57 +0000

Modals are essential nowdays and i've seen alot of ways to create them, Today i wanted to create my first post here using only reactjs & Tailwindcss.

Here is what we are going to build

Let's go

Create React Project
First, Create a simple react project using create-react-app cli

npx  Create-react-app  react-modal

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Lets do some cleaning

import "./App.css";

function App() {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

export default App;

Lets add Tailwindcss
as it shows on Tailwindcss doc

npm install -D tailwindcss

npx tailwindcss init

Configure your template

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

and Add Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

We are done lets start our app

npm run start

As you can see everything works perfectly now 👍

import "./App.css";

function App() {
  return (
    <div>
      <h1 className="text-center text-2xl text-red-500">Hello world</h1>
    </div>
  );
}

export default App;

In this tutorial we will be needing two things button & the modal it self

so lets create them this way

import "./App.css";
import ReactModal from "./ReactModal";

function App() {
  return (
    <div className="flex flex-col justify-center items-center h-screen w-screen">
      <ReactModal/>
      <button className="py-2 px-4 border rounded-md text-blue-100 bg-blue-400 hover:bg-blue-500 hover:text-white duration-75">
        Click here
      </button>
    </div>
  );
}

export default App;

you can customize the button as you like 😋

now we add a useState to control the modal

const [visible, setIsVisible] = useState(false);

go to ReactModal component and create it

import React from "react";

const ReactModal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div
      onClick={onClose}
      className="fixed z-50 bg-black bg-opacity-40 top-0 bottom-0 left-0 right-0 w-full h-full flex justify-center items-center"
    >
      <div
        onClick={(e) => {
          e.stopPropagation();
        }}
        className="bg-white p-2 lg:p-5 rounded-xl shadow-md"
      >
        <div onClick={onClose} className="text-2xl cursor-pointer w-fit h-fit">
          X
        </div>
        <div className=" my-2">This is my Awsome Modal 😎</div>
      </div>
    </div>
  );
};

export default ReactModal;

We pass isOpen & onClose to the parent so we use them on the useState to control the Modal visibility

notice that i added onClick

on the main div so you dismiss the modal when you click anywhere

onClick={onClose}

and stopPropagation on the inner div so it wont dismiss when you click on the inner modal

onClick={(e) => {e.stopPropagation();}}

ofcourse you can change the ❌ to a fancy SVG icon i just wanted to make it look nifty using the emoji 😋

*Finally in the parent div *

import { useState } from "react";
import "./App.css";
import ReactModal from "./ReactModal";

function App() {
  const [visible, setIsVisible] = useState(false);

  return (
    <div className="flex flex-col justify-center items-center h-screen w-screen">
      <ReactModal isOpen={visible} onClose={() => setIsVisible(false)} />
      <button
        onClick={() => setIsVisible(true)}
        className="py-2 px-4 border rounded-md text-blue-100 bg-blue-400 hover:bg-blue-500 hover:text-white duration-75"
      >
        Click here
      </button>
    </div>
  );
}

export default App;

and now you have a customized fast easy and cool looking modal without using any packages... ofcourse you can do that without Tailwindcss too

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.

Forem: Mustafa Al Ajmi

Easy React Modal with Tailwindcss 😎