0.6.7 • Published 3 months ago
react-dialog-promise v0.6.7
React dialog promise
Use dialog in React, without tears
Installation
React Dialog promise is available as an npm package.
npm install react-dialog-promise
Usage
First, you have to wrap your app with DialogProvider
import React from 'react';
import ReactDOM from "react-dom";
import { DialogProvider } from 'react-dialog-promise';
import MyApp from "MyApp";
ReactDOM.render(
<DialogProvider>
<MyApp />
</DialogProvider>,
document.getElementById("root")
);
Then, you have to create your dialog Component
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<Props, Result> = ({ isOpen, close, title }) => {
return (
<Modal
isOpen={isOpen}
onClose={() => close(false)}
isCentered
>
<ModalOverlay />
<ModalContent>
<ModalHeader>{title}</ModalHeader>
<ModalBody>
Confirm action ?
</ModalBody>
<ModalFooter>
<Button onClick={() => close(true)}>Cancel</Button>
<Button onClick={() => close(false)}>Confirm</Button>
</ModalFooter>
</ModalContent>
</Modal>
)
}
export default MyDialog
Finally, you can use your dialog component in your app
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 (
<div>
<button onClick={handleClick}>Open dialog</button>
</div>
);
}
export default MyApp;
0.6.7
3 months ago
0.6.0
3 months ago
0.4.2
7 months ago
0.4.1
11 months ago
0.4.0
11 months ago
0.3.9
1 year ago
0.3.11
1 year ago
0.3.10
1 year ago
0.3.0
1 year ago
0.3.6
1 year ago
0.3.5
1 year ago
0.3.8
1 year ago
0.3.7
1 year ago
0.3.2
1 year ago
0.3.1
1 year ago
0.3.4
1 year ago
0.3.3
1 year ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago