React-confirm-pro NPM

react-confirm-pro

Dialog callable component for React Live demo|Examples

Getting started

Install with NPM:

$ npm install react-confirm-pro --save

Install with Yarn:

$ yarn add react-confirm-pro

Options

Attribute	Type	Default	Description
duration	number	0.4	Animation duration.
delay	number	0.2	Animation body delay
animate	{in?: string;out?: string;}	{in: "animate_fadeIn",out: "animate_fadeOut"}	For using custom in/out animation read the guide on Animate.cssin: on Enter animationout: on Leave animation
className	string	-	Container className
onClickOutside	() => void	-	Outside handler
closeOnClickOutside	boolean	true	Outside check
keyboardEvents	{escape?: boolean;submit?: boolean;}	{escape: true;submit: false}	Keyboard events
customUI	({onClose?: () => void;onCancel: () => void;onSubmit: () => void; }) => React.ReactNode;	-	Custom Ui component
body	React.ReactNode[]	-	Body content components
buttons	({onClose?: () => void;onCancel: () => void;onSubmit: () => void;}) => React.ReactNode[];	-	Action buttons
title	stringReact.ReactNode	-	Component title
description	stringReact.ReactNode	-	Component description
onSubmit	() => void;	-	Submit action
onCancel	() => void;	-	Cancel action
closeButton	React.ReactNode	-	Close icon
type	lightdark	light	Style type
btnCancel	string	Cancel	Cancel button label
btnSubmit	string	Submit	Submit button label

Code examples

Other examples

Default example:

import React from 'react';
import ReactDOM from 'react-dom'
import { onConfirm } from 'react-confirm-pro';

function ReactConfirmProDemo() {
  const onClickLight = () => {
    onConfirm({
      title: (
        <h3>
          Are you sure?
        </h3>
      ),
      description: (
        <p>Do you really want to delete this records? This process cannot be undone.</p>
      ),
      onSubmit: () => {
        alert("Submit")
      },
      onCancel: () => {
        alert("Cancel")
      },
    })
  };
  return (
    <button type="button" onClick={onClick}>Click</button>
  );
}

const rootEl = document.getElementById('root')
ReactDOM.render(<ReactConfirmProDemo />, rootEl)

Custom UI:

import React from 'react';
import ReactDOM from 'react-dom'
import { onConfirm } from 'react-confirm-pro';

const CustomUI = ({
  onSubmit,
  onCancel
}) => (
  <div className="custom-ui">
    <h3>Are you sure?</h3>
    <p>Do you really want to delete this records? This process cannot be undone.</p>
    <div>
      <button onClick={onSubmit}>Yes</button>
      <button onClick={onCancel}>No</button>
    </div>
  </div>
)

function ReactCustomUIDemo() {
  const onClick = () => {
    onConfirm({
      onSubmit: () => {
        alert("Submit")
      },
      onCancel: () => {
        alert("Cancel")
      },
      customUI: CustomUI,
      className: "my-custom-ui-container"
    })
  };
  return (
	  <button onClick={onClick}>Click</button>
  );
}

const rootEl = document.getElementById('root')
ReactDOM.render(<ReactConfirmProDemo />, rootEl)