Skip to content

yahya-mohammed07/react-modal

Repository files navigation

React Modal with Tailwind CSS and No UI Component Library

This repository contains a simple example of how to create a React modal using Tailwind CSS for styling and without relying on any UI component library.

Getting Started

To get started with this example, follow these steps:

  1. Clone the Repository: Clone this repository to your local machine.

  2. Install Dependencies: In the project directory, run pnpm install or yarn install to install the necessary dependencies, including Tailwind CSS check their official website for detailed installation.

  3. Run the Application: Once the dependencies are installed, you can run the application using pnpm dev start or yarn dev start. This will start the development server and open the application in your default web browser.

Creating a Modal Component

The modal component is implemented in the Modal.tsx file. It uses React state to control the visibility of the modal and Tailwind CSS for styling.

Handling Modal Behavior

The App.tsx file contains an example of how to use the modal component and manage its behavior. It demonstrates how to control the opening and closing of the modal by handling click events and managing the modal state.