Custom-react-modal-by-you NPM

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.