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)