### Installation
`npm i promise-confirmation-dialog`
### 💩 Native
```jsx
function Component() {
function delete() {
const confirmed = window.confirm("Do you really want to delete 📦?")
if(confirmed){
...process..
}
}
}
```
### 🚀 Custom
```jsx
import { useDialog } from "promise-confirmation-dialog";
function Component() {
const { showDialog } = useDialog();
async function delete() {
const confirmed = await showDialog("Do you really want to delete 📦"?)
if(confirmed){
...process..
}
}
}
```
### 📚 Interface
`useDialog()` returns two properties, `showDialog` and `dialog`.
`showDialog` method takes message as argument, sets dialog state and returns promise.
`dialog` is confirmation dialog state, which has following interface
```jsx
{
isOpen: boolean,
message: string,
confirm: resolve,
cancel: reject
}
```
### 🚚 To use the custom confirmation dialog, you must wrap your app with context provider.
```jsx
import { ConfirmationDialogProvider } from "promise-confirmation-dialog";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
);
```
### 🤸 Example
```jsx
import React from "react";
import "./App.scss";
import { useDialog } from "promise-confirmation-dialog";
import Modal from "react-modal";
const customStyles = {
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
},
};
function App() {
const { showDialog, dialog } = useDialog();
const handleDownload = async () => {
const confirmed = await showDialog(
"Are you sure, you want to download page"
);
if (confirmed) {
window.alert("Download...");
}
};
return (
{dialog.message}
);
}
export default App;
```
---
_Source: https://npm.io/package/promise-confirmation-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._