Modal dialog component for React.JS

Installation

To install, you can use npm :

$ npm install --save @soeunlee/reactjs-modal

Features

• Provides a straightforward implementation of a modal interface, featuring a dark background, a body section, and a footer that includes a close button.
• Enhance the customization of the modal by assigning classnames to the modal content, button, and individual containers, allowing for personalized styling and layout adjustments.
• Seamlessly integrate with widely adopted CSS frameworks such as Tailwind and Bootstrap to leverage their extensive styling capabilities and streamline the development process.

Mandatory props

| Name | Type | Description | | ------------ | ----------------- | ----------------------------------------------------------------------------------- | | onClose | MouseEventHandler | A function to handle the close event of the modal when the close button is clicked. | | setModalOpen | boolean | A boolean value indicating whether the modal should be open or closed. | | children | React.ReactNode | The content or components that will be displayed inside the modal. | | btnLabel | string | A string representing the label or text content of the close button. |

Optional props for customization

| Name | Type | Description | | --------------- | ----------------- | --------------------------------------------------------------------------------------------------- | | backgroundClass | string (optional) | A string representing additional CSS class names for the background element of the modal. | | containerClass | string (optional) | A string representing additional CSS class names for the container element of the modal. | | bodyClass | string (optional) | A string representing additional CSS class names for the body element of the modal. | | footerClass | string (optional) | A string representing additional CSS class names for the footer element of the modal. | | btnClass | string (optional) | A string representing additional CSS class names for the close button of the modal. | | btnLabelClass | string (optional) | A string representing additional CSS class names for the label or text content of the close button. |

Basic examples

Here is a simple example of react-modal being used in an app with some custom classnames to style the modal

import React, { useState } from 'react';
import { Modal } from '@soeunlee/reactjs-modal';

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

  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>Click to open Modal</button>
      <Modal
        onClose={() => setIsModalOpen(false)}
        setModalOpen={isModalOpen}
        children={
          <div>
            <h1>Modal is opened!</h1>
          </div>
        }
        btnLabel="close"
      />
    </>
  );
}

export default App;