dfc-alert-mui
v1.0.5
Published
Async await Alert Box Material-UI based for TypeScript applications
Maintainers
nfaaiqReadme
dfc-alert-mui
dfc-alert-mui is a customizable alert dialog component built with Material-UI for React applications. It supports TypeScript and provides a clean API to show modal dialogs with "Yes" and "No" buttons, as well as flexible customization options.
Installation
Install the package using npm or yarn:
npm install dfc-alert-mui
# or
yarn add dfc-alert-muiAdd <div id="alert-popup-box"></div> in index.html file after root
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React</title>
</head>
<body>
<div id="root"></div>
<div id="alert-popup-box"></div>
<script src="./bundle.js"></script>
</body>
</html>Usage
Importing the Component
import { ShowDialoge, hideDialoge } from 'dfc-alert-mui/dist'; // Import the ShowDialoge functionExample: Basic Usage with Async Confirmation
In this example, the ShowDialoge function is used to display a confirmation dialog. The dialog returns an answer ("Yes" or "No") based on the user interaction.
import React from 'react';
import { ShowDialoge } from 'dfc-alert-mui/dist'; // Import the ShowDialoge function
const App = () => {
const handleClick = async () => {
const alertProp: any = {};
alertProp.title = "Confirmation";
alertProp.msg = "Do you want to delete?";
alertProp.yesLabel = 'Yes';
alertProp.noLabel = 'No';
alertProp.hideClose = false; // Whether to hide the close icon (default: false)
alertProp.hideNo = false; // Whether to hide the "No" button (default: false)
// Show the dialog and wait for a response
let ans = await ShowDialoge(alertProp);
// Handle the response
if (ans.ans === 'No') {
// Code to execute when the "No" button is pressed
console.log('User clicked No');
} else {
// Code to execute when the "Yes" button is pressed
console.log('User clicked Yes');
}
console.log(ans); // Log the result
};
return (
<div>
<button onClick={handleClick}>Show Popup</button> {/* Trigger the alert dialog */}
</div>
);
};
export default App;Props for ShowDialoge
| Prop | Type | Description |
|----------------|------------------|-------------|
| title | string | The title of the dialog. |
| msg | string | The message displayed in the dialog. |
| yesLabel | string | The label for the "Yes" button. |
| noLabel | string | The label for the "No" button. |
| hideClose | boolean | Set to true to hide the close icon (default: false). |
| hideNo | boolean | Set to true to hide the "No" button (default: false). |
Return Value from ShowDialoge
ShowDialoge is an async function that returns an object with the user's response:
{
ans: 'Yes' | 'No' // The answer the user clicked
}You can handle the response and take action based on the user's choice, as shown in the example above.
Example with Custom Styling and Button Labels
You can customize the dialog’s appearance and button labels as needed:
const handleCustomClick = async () => {
const customAlertProps: any = {};
customAlertProps.title = "Custom Action";
customAlertProps.msg = "Are you sure you want to proceed?";
customAlertProps.yesLabel = 'Proceed';
customAlertProps.noLabel = 'Cancel';
customAlertProps.hideClose = true; // Hide the close icon
customAlertProps.hideNo = true; // Hide the "No" button
let response = await ShowDialoge(customAlertProps);
if (response.ans === 'Proceed') {
// Custom action for "Proceed"
console.log('Action confirmed');
} else {
// Custom action for "Cancel"
console.log('Action canceled');
}
};Default Props
ShowDialoge.defaultProps = {
title: 'Confirm',
msg: 'Are you sure?',
yesLabel: 'Yes',
noLabel: 'No',
hideClose: false,
hideNo: false,
};You can also modify these default values when invoking the ShowDialoge function, allowing for easy customizations on a per-instance basis.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Additional Notes
- This component is built using Material-UI, so you can easily integrate it into your existing Material-UI projects.
- The dialog is fully responsive and adapts to different screen sizes, making it suitable for mobile and desktop use.
- You can further customize the dialog’s appearance by overriding Material-UI’s default styling or by passing additional CSS styles through the
sxprop.