React Modal Plugin

A reusable modal component for React apps, written in TypeScript. This plugin provides a simple interface to display custom modals with action buttons.

Installation

To install the plugin, use npm :

npm install @davy-dev/react-modal-plugin

or

yarn add @davy-dev/react-modal-plugin

Use

Import the Modal component into your React file :

import Modal, { openModal } from "react-modal-plugin";

Here is an example of using the modal component :

import { useState } from "react";
import Modal, { openModal } from "react-modal-plugin";

const App = () => {
  const handleCancel = () => {
    console.log("Cancel button clicked");
  };

  const handleConfirm = () => {
    console.log("OK button clicked");
  };

  return (
    <div>
      <button onClick={openModal}>Open the Modal</button>
      <Modal
        title="Title of the Modal"
        showCancelButton={true}
        cancelButtonText="Cancel this action"
        cancelButtonClassName="cancel-class-modal"
        okButtonText="Yes, I'am sure."
        okButtonClassName="ok-class-modal"
        onCancel={handleCancel}
        onConfirm={handleConfirm}
      >
        <p>Content of the modal</p>
      </Modal>
    </div>
  );
};

export default App;

Component Properties

| Property | Type | Default Value | Description | | ----------------------- | --------------------- | ------------- | ------------------------------------------------------------- | | title | React.ReactNode | N/A | The title of the modal, can be a string or JSX. Required. | | children | React.ReactNode | N/A | Content of the modal. Optional. | | className | string | "" | Optional CSS classes for additional styling of the modal. | | style | React.CSSProperties | {} | Inline styles for the modal. Optional. | | showCancelButton | boolean | false | Controls whether to display the "Cancel" button. Optional. | | showOkButton | boolean | true | Controls whether to display the "OK" button. Optional. | | cancelButtonText | string | "Cancel" | Text for the "Cancel" button. Optional. | | okButtonText | string | "OK" | Text for the "OK" button. Optional. | | cancelButtonClassName | string | "" | Optional CSS classes for the "Cancel" button. | | okButtonClassName | string | "" | Optional CSS classes for the "OK" button. | | onCancel | () => void | N/A | Callback function called when the "Cancel" button is clicked. | | onConfirm | () => void | N/A | Callback function called when the "OK" button is clicked. |

Examples of Use

1. Modal with only a title and the OK button that closes the modal

<Modal title = "Title of the Modal"></Modal>

2. Modal with a custom title, content and the OK button that closes the modal

<Modal title = {<h2 style={{ color: "blue" }}>Custom Title with HTML</h2>}>
  <p>Content of the modal</p>
</Modal>

3. Modal with action buttons

<Modal
  title = "Confirmation"
  showCancelButton = {true}
  cancelButtonClassName = "my-cancel-button"
  onCancel = handleCancel()
  onConfirm = handleConfirm()
>
  <p>Are you sure you want to continue ?</p>
</Modal>

Contribute

Plugin simply created for the needs of a personal project.

License

This plugin is free.