Customizable Modal Manager For React Apps – React.js Prompt Modal

React.js Prompt Modal is a lightweight, customizable, flexible modal library that enables developers to prompt users for input, confirmations, or decisions using modal windows in React-powered applications.

It has no third-party component or styling library dependencies and works with popular frameworks like Bootstrap, Tailwind, ChakraUI, etc.

How to use it:

1. Install and import the createModal component.

# Yarn
$ yarn add react-prompt-modal

# NPM
$ npm i react-prompt-modal

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

2. Create a basic modal in your app.

// 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 = {
 // props here
};

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

// Trigger the modal
open();

// Cancel the modal action
abort();

// Close the modal
close();

// Set the loading state
setIsLoading(loading: boolean);

3. Available props.

// Indicates if the dialog is shown or not (from react-prompt-modal)
show: PropTypes.bool,

// Indicates whether the modal is in a loading state (from react-prompt-modal)
isLoading: PropTypes.bool, 

// abort function
abort: PropTypes.func,

// close function
close: PropTypes.func, 

// proceed function
proceed: PropTypes.func,

Preview:

Download Details:

Author: Paul-Taiwo

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Paul-Taiwo/react-prompt-modal

License: MIT