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

Description:

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:

React.js Prompt Modal

Add Comment