Package Exports

react-dialog-confirm
react-dialog-confirm/dist/index.es.js
react-dialog-confirm/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-dialog-confirm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-dialog-confirm

react-dialog-confirm is a React component that provides a simple way to display confirmation dialogs in your application.

A flexible and customizable dialog/modal component for React. This component can be used to display various types of messages to users and allow them to confirm or cancel an action...

demo

Features

Easy to use and implement in React applications.
Supports two different button types for confirmation and cancellation.
Option to display an icon in the dialog box.
Ability to customize the icon color and size.
Callback function for handling confirmation actions.
Can be used to confirm actions before performing them.
Accessibility-friendly with keyboard navigation and screen reader support.
Compatible with both mobile and desktop devices.
Can be styled using CSS to match the overall look and feel of your application.

Installation

You can install react-dialog-confirm using npm:

npm install react-dialog-confirm

yarn add react-dialog-confirm

Usage

To use react-dialog-confirm, you need to import it into your React component:

import { DialogProvider } from 'react-dialog-confirm';

cover your App component

import {DialogProvider} from 'react-dialog-confirm';

export default function index() {
  return (
    <DialogProvider>
      <App />
    </DialogProvider>
  )
}

callback open modal function to open modal dialog.

import { DialogModal, useModal } from "react-dialog-confirm";
...
//in component
const { openModal } = useModal();

openModal(
  <DialogModal
    icon='success'
    title='Welcome'
    description={'welcome to react-dialog-confirm component'}
  />)
...

Props

Here are the available props for the DialogModal component:

Prop	Type	Options	Default	Description
icon	string	'success','info,'warning','error	-	The icon to display in the dialog header.
title	string	your message	-	The title of the confirmation dialog.
titleStyle	style object	-	-	CSS styles to apply to the title
description	string	-	-	The message to be displayed in the confirmation dialog.
descriptionStyle	style object	-	-	CSS styles to apply to the description
confirm	string	-	"OK"	The label for the confirm button.
cancel	string	-	"Cancel"	The label for the cancel button.
onConfirm	function	-	() => {}	The callback function that will be called when the user confirms the action.
onCancel	function	-	() => {}	The callback function that will be called when the user cancels the action.
hasCancel	boolean	-	false	Whether to display a cancel button

Examples

Here are some examples of how you can use react-dialog-confirm in your React application:

_app.js

import {DialogProvider} from 'react-dialog-confirm';

export default function App({ Component, pageProps }) {
  return (
    <DialogProvider>
      <Component {...pageProps} />
    </DialogProvider>
  )
}

Mypage.js

import React from "react";
import { DialogModal, useModal } from "react-dialog-confirm";

const Mypage = () => {

    const openModal = useModal()?.openModal;

    const handleClick = () => {
        openModal(
        <DialogModal
        icon='success'
        title='Welcome'
        description={'welcome to react-dialog-confirm component'}
        />)
    }
    return(
        <div>
            <button onClick={handleClick}>Open modal</button>
        </div>
    )
}

export default Mypage;

License

This component is licensed under the MIT License.