react-amazing-modal-component v1.0.3

React Modal Component

A lightweight, customizable modal component for React, using React Portals.

Requirements

This package has been developed and tested with the following versions:

• Node.js: 23.8.0
• React: 19.0.0

It is recommended to use these versions for optimal compatibility.

Installation

You can install this package via npm:

npm install react-amazing-modal-component

Usage

Basic Example

import React, { useState } from "react";
import Modal from "react-amazing-modal-component";
import "react-amazing-modal-component/dist/modal.css"; // Import default styles (optional)

export default function App() {
	const [isOpen, setIsOpen] = useState(false);

	return (
		<div>
			<button onClick={() => setIsOpen(true)}>Open Modal</button>
			<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
				<h2>Modal Title</h2>
				<p>This is a simple modal example.</p>
				<button onClick={() => setIsOpen(false)}>Close</button>
			</Modal>
		</div>
	);
}

Props

Customization

You can override the default styles by providing your own CSS.

Default CSS Classes:

• .modal-overlay → The background overlay
• .modal-content → The modal container
• .modal-close → The close button

Example Custom Styling:

.modal-overlay {
	background: rgba(0, 0, 0, 0.7);
}
.modal-content {
	max-width: 500px;
	padding: 20px;
	background: white;
	border-radius: 8px;
}

License

This project is licensed under the MIT License.