https://github.com/xamogh/react-imperative-modal-dialog
Imperative handler for dialog modals popups etc..
https://github.com/xamogh/react-imperative-modal-dialog
dialog imperative modal popup react
Last synced: 4 months ago
JSON representation
Imperative handler for dialog modals popups etc..
- Host: GitHub
- URL: https://github.com/xamogh/react-imperative-modal-dialog
- Owner: xamogh
- License: mit
- Created: 2022-08-23T10:05:25.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-30T07:10:26.000Z (about 3 years ago)
- Last Synced: 2025-03-10T20:38:39.442Z (7 months ago)
- Topics: dialog, imperative, modal, popup, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-imperative-modal-dialog
- Size: 341 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Imperative-Modal / Dialogs
Extremely lightweight imperative API for using react Modal/Dialog/Popover components.
## Installation
Install via npm or yarn
```bash
npm install react-imperative-dialog-modal
```
## Usage/Examples
#### Example provided with material-ui dialog component use. However can be used with any library or custom dialog similarly.
```javascript
import { DialogBuilder } from "react-imperative-modal-dialog";
import { Dialog } from "@mui/material";
interface MyConfirmDialogComponentProps {
open: boolean;
onClose: () => void;
onConfirm: () => void;
}
// Your component here
// Component should accept open and onClose props at the very least.
const MyConfirmDialogComponent = (props: MyConfirmDialogComponentProps) => {
const { open, onClose, onConfirm } = props;
return (
Are you sure you want to do this action?
Confirm
);
};
// Pass in your dialog component to the builder
// Note that props open and onClose are mandatory props that must be present for the dialog component that is passed in
// 'open' and 'onClose' are required because dialogbuilder intercepts these props and handles opening and closing actions
const ConfirmDialog = new DialogBuilder()
.setComponent(MyConfirmDialogComponent)
.build();
function App() {
const handleDialogOpen = () => {
ConfirmDialog
// pass in component props here
// no need to pass 'open' since it is intercepted and removed
.withProps((dialog) => ({
onConfirm: async () => {
// await deleteItem();
dialog.close();
},
onClose: () => console.log("closed"),
}))
.open();
};
return (
Item 1
Delete
);
}
export default App;
```
## API Reference
#### Instance creation
```javascript
const dialog = new DialogBuilder()
.setComponent(YourDialogComponent)
.build();
```
#### Opening dialog
```javascript
dialog.open();
```
#### Passing dialog component props
```javascript
dialog.withProps((dialog) => {
yourDialogComponentProp1: "prop1",
yourDialogComponentProp2: "prop2",
yourDialogComponentProp3: async () => {
await doSomeAction();
dialog.close();
},
});
```
#### Closing dialog
```javascript
dialog.close();
```
#### Unmount dialog
```javascript
dialog.unmount();
```
## License
[MIT](https://choosealicense.com/licenses/mit/)