react-confirm-pro

dialog callable component

Usage no npm install needed!

<script type="module">
  import reactConfirmPro from 'https://cdn.skypack.dev/react-confirm-pro';
</script>

README

react-confirm-pro

Dialog callable component for React Live demo|Examples

Maintenance Status npm version npm downloads Build Status

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.css
in: on Enter animation
out: 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 string
React.ReactNode
- Component title
description string
React.ReactNode
- Component description
onSubmit () => void; - Submit action
onCancel () => void; - Cancel action
closeButton React.ReactNode - Close icon
type light
dark
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)