https://github.com/thomas-gleizes/react-dialog-promise
A typesafe and simple react dialog state manager
https://github.com/thomas-gleizes/react-dialog-promise
Last synced: 3 months ago
JSON representation
A typesafe and simple react dialog state manager
- Host: GitHub
- URL: https://github.com/thomas-gleizes/react-dialog-promise
- Owner: thomas-gleizes
- License: mit
- Created: 2022-07-24T19:37:21.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-25T10:59:01.000Z (over 1 year ago)
- Last Synced: 2025-02-21T04:47:44.355Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 320 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React dialog promise
Use dialog in React, without tears
## Installation
React Dialog promise is available as an [npm package](https://www.npmjs.org/package/react-dialog-promise).
```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 (
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 (
Open dialog
);
}
export default MyApp;
```