custom-react-modal-by-you

A simple, lightweight, and customizable React modal component, perfect for displaying modals, dialogs, or overlays with ease.

Features

• 🛠 Fully Customizable: Easily pass title, content, and actions.
• ⚡ Lightweight: Minimal dependency footprint.
• 🎯 Accessible: Comes with proper aria attributes.
• 🎨 Easy Styling: Supports custom styles via CSS.
• 📦 Plug-and-Play: Straightforward installation and usage.

Installation

Install the package via npm:

npm install custom-react-modal-by-you

Usage

Here’s how to use the modal in your project:

Basic Example

import React, { useState } from "react";
import Modal from "custom-react-modal-by-you";
import "./Modal.css"; // Ensure you import the default styles or write your own

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

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

      <Modal isOpen={isModalOpen} onClose={closeModal} title="My Custom Modal">
        <p>This is a customizable modal body!</p>
        <button onClick={closeModal}>Close</button>
      </Modal>
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |---------------|--------------------|------------------|-----------------------------------------------| | isOpen | bool | false | Controls the visibility of the modal. Required. | | onClose | func | () => {} | Function to close the modal. Required. | | title | string | "Modal Title" | Sets the modal's title. | | children | React.node | null | Modal content/body. |

Styling

This component comes with a basic Modal.css file for default styling. Customize it or override it with your own styles.

Default CSS Classes

| Class Name | Description | |-----------------------|------------------------------------| | modal-overlay | The modal's overlay background. | | modal | The container for modal content. | | modal-header | Header section of the modal. | | modal-title | Title of the modal. | | modal-close | Close button for the modal. | | modal-body | Body/content area of the modal. |

Accessibility

• The close button includes an aria-label="Close modal" attribute for screen readers.
• Modal overlay supports closing the modal on clicking outside the content area.

License

This project is licensed under the MIT License.

Author

Created by Younes.

Contributing

Feel free to fork the repository and submit pull requests. Suggestions, issues, and improvements are always welcome!