React dialog promise

Use dialog in React, without tears

Installation

React Dialog promise is available as an npm package.

``sh
npm install react-dialog-promise
`

Usage

First, you have to wrap your app with DialogProvider

`typescript jsx
import React from 'react';
import ReactDOM from "react-dom";
import { DialogProvider } from 'react-dialog-promise';

import MyApp from "MyApp";

ReactDOM.render(


,
document.getElementById("root")
);


`

Then, you have to create your dialog Component

`typescript jsx
import React from 'react';
import { DialogComponent } from "react-dialog-promise";
import {
Modal,
ModalOverlay,
ModalHeader,
ModalContent,
ModalBody,
ModalFooter,
Button,
} from '@chakra-ui/react';

interface Props {
title: string
}

type Result = boolean

const MyDialog: DialogComponent = ({ isOpen, close, title }) => {
return (
isOpen={isOpen}
onClose={() => close(false)}
isCentered
>


{title}

Confirm action ?


close(true)}>Cancel
close(false)}>Confirm



)
}

export default MyDialog
`

Finally, you can use your dialog component in your app

`typescript jsx
import React from 'react';
import { useDialog } from "react-dialog-promise";

import MyDialog from "./MyDialog";

const MyApp: React.FC = () => {
const myDialog = useDialog(MyDialog);

const handleClick = async () => {
const result = await myDialog.open({ title: "My easy to use dialog" });

console.log("Dialog result :", result)
}

return (


``