use-dialog-mui

React alternative to window.alert() using MUI

Installation

npm install use-dialog-mui

Setup

<DialogProvider>
  <App />
</DialogProvider>

useDialog

const ExampleButton = () => {
  const dialog = useDialog()
  return <button onClick={async () =>
    const result = await dialog.show({
      title: "Do you want to save your changes?",
      actions: [
        { title: localized("yes", "Yes"), key: "yes" },
        { title: localized("no", "No"), key: "no" },
        { title: localized("cancel", "Cancel"), key: "cancel" },
      ]
    }) // returns "yes" | "no" | "cancel" | null
    if (result === "yes") {
      console.log("yay")
    }
  }>
    Push me
  </button>
}

API

show(options: DialogOptions): Promise<T | null>

interface DialogOptions<Keys extends string> {
  title: string
  message?: string
  actions: DialogAction<Keys>[]
}

interface DialogAction<Key extends string> {
  title: string
  key: Key
}