react-dialog-confirm

the simple modal react component

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

or

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.