https://github.com/vriskaserket51/mui-multiple-popup
https://npmjs.com/package/mui-multiple-popup
https://github.com/vriskaserket51/mui-multiple-popup
mui popup react
Last synced: 3 months ago
JSON representation
https://npmjs.com/package/mui-multiple-popup
- Host: GitHub
- URL: https://github.com/vriskaserket51/mui-multiple-popup
- Owner: VriskaSerket51
- Created: 2024-03-17T12:38:35.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-07-07T12:27:19.000Z (11 months ago)
- Last Synced: 2025-01-15T12:06:15.609Z (5 months ago)
- Topics: mui, popup, react
- Language: TypeScript
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MUI Multiple Popup
MUI's `Popup` component is useful, however, quite complex for multiple dialogs or popups.
This package is for simple multi-popups, and also includes simple loading spinner with message.
## Installation
`npm i mui-multiple-popup`
## Usage
You can use various feature with just simple import statement.
```typescript
import Popup from "mui-multiple-popup";
```
Useful components:
- DialogContainer: Container for popups, you must include this component in somewhere to use multiple popups.
- LoadingComponent: Container for loading spinner, you must include this component in somewhere to use loading spinner.
Useful functions:
- closeDialog(id: number),
- closeAll(),
- openConfirmDialog(title: ReactNode, content: ReactNode, onYes?: VoidFunction) => number,
- openYesNoDialog(title: ReactNode, content: ReactNode, onYes?: VoidFunction, onNo?: VoidFunction) => number,
- openCancelableDialog(title: ReactNode, content: ReactNode, onCancel?: VoidFunction) => number,
- startLoading(text: string),
- stopLoading(),
## Example
```typescript
import { useEffect } from "react";
import Popup from "mui-multiple-popup";
function App() {
useEffect(() => {
const id = Popup.openConfirmDialog("Test", "Howdy!", () => console.log("Popup Closed."));
console.log(`Popup id: ${id} opend!`);
// Popup.close(id);
}, []);
return ;
}
```