• 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.

Install the package using npm:

npm install react-prompt-modal

or using yarn:

yarn add react-prompt-modal

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 });

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.

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;

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

• 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.

This package is licensed under the MIT License.

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