DEV Community

Akshay S
Akshay S

Posted on

4 2

An Better way to call mui alert dialog

Installation

Install mui-react-alert with npm

  npm i mui-react-alert
Enter fullscreen mode Exit fullscreen mode

Demo

https://codesandbox.io/s/funny-mestorf-k2dcph

Usage/Examples

App.tsx

import { AlertDialog } from "mui-react-alert";

function App() {
  return (
    <div className="App">
      <AlertDialog />
    </div>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

Button.tsx

import { showAlertConfirmarion } from "mui-react-alert";

function Button() {
  return (
      <button
      onClick={() => {
          showAlertConfirmarion({
          title: "Use Google's location service?",
          cancelLabel: "DISAGREE",
          confirmLabel: "AGREE",
          subtitle:
            "Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.",
          onConfirmation: function (): void {
            alert("Say hello");
          },
        });
      }}
    >
      Show alert dialog
    </button>
  );
}

export default Button;

Enter fullscreen mode Exit fullscreen mode

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay