React Modal

React Modal is a customizable modal component for React applications. It allows you to display overlays, alerts, or dialog boxes in your application with ease.

Installation

You can install React Modal using npm:

npm install @namopanda/react-modal

Usage

Import the Modal component and use it in your React application:

import React, { useState } from 'react';
import Modal from 'react-modal';

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const openModal = () => {
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (
    <div>
      <h1>My App</h1>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={closeModal}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

Props

The Modal component accepts the following props:

isOpen (boolean): Determines whether the modal is open or closed.

onRequestClose (function): Callback function invoked when the user requests to close the modal (e.g., clicks outside the modal or presses the escape key).

Customization

You can customize the appearance and behavior of the modal by applying CSS classes or overriding the default styles.

License

This project is licensed under the MIT License.