Dfc-alert-mui NPM

`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-mui

Add <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 function

Example: 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 sx prop.