bd-react-simple-modal

bd-react-simple-modal is a simple and customizable modal component for React, designed to be lightweight and easy to integrate into any project. Includes essential features like backdrop opacity, adjustable size, and accessibility support.

Install

You can install the package via npm:

npm install bd-react-simple-modal

Usage

Here is an example of how to use the Modal component:

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

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

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        title="Example Modal"
        size="medium"
        backdropOpacity={0.5}
      >
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

Props

• isOpen (boolean): Controls whether the modal is visible or not.
• onClose (() => void): Function to call when the modal should be closed.
• title (string): Optional title to display at the top of the modal.
• size ('small' | 'medium' | 'large'): Size of the modal. Default is 'medium'.
• backdropOpacity (number): Opacity of the backdrop. Default is 0.5.
• children (React.ReactNode): The content to display inside the modal.
• showCloseButton (boolean): Whether to show a close button. Default is true.
• onBackdropClick (() => void): Function to call when the backdrop is clicked.
• aria-labelledby (string): ID of the element that labels the modal.
• aria-describedby (string): ID of the element that describes the modal.

CSS Classes

The Modal component uses the following CSS classes for styling. You can override these classes in your own CSS to customize the appearance of the modal.

• .modal-backdrop: Styles the dark background behind the modal.
• .modal: The main container for the modal content.
• .modal-header: The header section of the modal.
• .modal-body: The body section where the main content is displayed.
• .modal-footer: Optional footer section for actions like buttons.
• .modal-small, .modal-medium, .modal-large: Different size options for the modal.
• .modal-close-button: Styles the close button inside the modal.
• .modal-buttons: Styles for button groups in the modal.

For more advanced customization, you can modify these classes or add new ones in your CSS.

Built with TSDX

This project was bootstrapped with TSDX.

License

MIT © bdelanls