paul-taiwo / react-prompt-modal

A lightweight helper library for creating and managing modals in React applications.

React.js Prompt Modal

Features

• Display prompt modals with custom content and options.
• Support for loading state and callback functions.
• Customizable styling and animations.
• Easy integration with React applications.
• Lightweight and dependency-free.

Installation

Install the package using npm:

npm install react-prompt-modal

or using yarn:

yarn add react-prompt-modal

Usage

Import the createModal function from the package and use it to create modal instances:

import React from "react";
import { createModal } from "react-prompt-modal";
import PropTypes from "prop-types";

// Define your custom component to be used as the modal content
const CustomModalContent = ({ show, isLoading, abort, close, proceed, ...others }) => {
  // Your component code here
};

CustomModalContent.propTypes = {
  show: PropTypes.bool, // Indicates if the dialog is shown or not (from react-prompt-modal)
  isLoading: PropTypes.bool, // Indicates whether the modal is in a loading state (from react-prompt-modal)
  abort: PropTypes.func, // Function to abort and close the modal, triggering any before-close effects if specified (from react-prompt-modal)
  close: PropTypes.func, // Function to directly close the modal without any additional effects (from react-prompt-modal)
  proceed: PropTypes.func, // Function to handle the proceed action in the modal (from react-prompt-modal)
};

// Create a modal instance
const { open, close } = createModal({
  component: CustomModalContent,
});

// Trigger the modal
open();

You can customize the behavior of the modal by providing additional options:

const { open, close, abort, setIsLoading } = createModal({
  component: CustomModalContent,
  proceed: () => {
    // Perform an action when the user clicks "Proceed"
    console.log("Proceed button clicked");
  },
  beforeClose: () => {
    // Perform any necessary cleanup or validation before closing the modal
    console.log("Before closing the modal");
  },
  // Additional options can be provided here
});

API

The createModal function accepts the following options:

• component: The component to be rendered inside the modal. It should be a valid React component.
• proceed: A callback function to be executed when the user clicks the "Proceed" button.
• beforeClose (optional): A callback function to be executed before closing the modal.
• Additional options: Any other custom options can be passed and accessed within the modal component.

The createModal function returns an object with the following methods:

• open(): Opens the modal and displays it to the user.
• abort(): Cancels the modal action and closes the modal. If a beforeClose callback is provided, it will be executed before closing the modal.
• close(): Closes the modal without any additional effects.
• setIsLoading(loading: boolean): Sets the loading state of the modal. Pass true to show a loading indicator, and false to hide it.

Examples

Basic Usage

import React from "react";
import { createModal } from "react-prompt-modal";

const CustomModalContent = ({ close }) => {
  return (
    <div>
      <h2>Welcome to the Modal</h2>
      <button onClick={close}>Close</button>
    </div>
  );
};

const { open } = createModal({
  component: CustomModalContent,
});

const App = () => {
  return (
    <div>
      <h1>React App</h1>
      <button onClick={open}>Open Modal</button>
    </div>
  );
};

export default App;

Customization and Callbacks

import React from "react";
import { createModal } from "react-prompt-modal";

const CustomModalContent = ({ abort, proceed }) => {
  return (
    <div>
      <h2>Are you sure you want to proceed?</h2>
      <button onClick={proceed}>Proceed</button>
      <button onClick={abort}>Cancel</button>
    </div>
  );
};

const { open } = createModal({
  component: CustomModalContent,
  proceed: () => {
    console.log("Proceed button clicked");
  },
  beforeClose: () => {
    console.log("Before closing the modal");
  },
});

const App = () => {
  return (
    <div>
      <h1>React App</h1>
      <button onClick={open}>Open Modal</button>
    </div>
  );
};

export default App;

You can find examples of how to use the react-prompt-modal package in the CodeSandbox demo:

React Prompt Modal CodeSandbox Bootstrap Examples

React Prompt Modal CodeSandbox Chakra UI Examples

React Prompt Modal CodeSandbox Tailwind CSS Examples

Benefits

• Simplicity: React Prompt Modal is designed to be easy to use and integrate into your React applications. It provides a straightforward API for creating and customizing modal dialogs.
• Flexibility: The package allows you to create modals with custom content and options tailored to your application's specific needs. You have full control over the modal's behavior and appearance.
• Lightweight: React Prompt Modal is a lightweight package with no external dependencies. It won't bloat your project and ensures fast and efficient performance.
• Customizable Styling: You can easily customize the styling of the modal component to match your application's design. Apply your own CSS classes or use a CSS-in-JS solution like styled-components.
• Loading State: React Prompt Modal supports a loading state, allowing you to indicate progress or data fetching to the user while the modal is open.

License

This package is licensed under the MIT License.

⭐️ Please Star this Project

If you find this project helpful or valuable, please consider giving it a star on GitHub. It's a great way to show your support and it helps the project gain visibility.

Thank you! 🌟

GitHub Paul Taiwo