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: "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; }) => React.ReactNode;onCancel: () => void; onSubmit: () => void; |
- | Custom Ui component |
body | React.ReactNode[] | - | Body content components |
buttons | ({ onClose?: () => void; }) => React.ReactNode[];onCancel: () => void; onSubmit: () => void; |
- | 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
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)