imperativemuidialogs

Imperative MUI React dialogs

Imperative React alert, confirm and prompt dialogs built with the MUI lib.

See the example page

Why?

When it comes to simple dialogs React's declarative way seems cumbersome, in order to avoid a component state management this lib provides the dialog functions that have same signature as native window alert, confirm and prompt functions.

How?

Install package:

npm i imperativemuidialogs

Wrap app in ImperativeMuiDialogsContextProvider:

import { ImperativeMuiDialogsContextProvider } from 'imperativemuidialogs'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ImperativeMuiDialogsContextProvider>
      <App />
    </ImperativeMuiDialogsContextProvider>
  </React.StrictMode>,
)

... and then hook to dialogs:

import { useAlert, useConfirm, usePrompt } from 'imperativemuidialogs'

const alert = useAlert()
const confirm = useConfirm()
const prompt = usePrompt()

await alert('Hello world');

if (await confirm('Confirm action?') {
  //
}

const answer = await prompt('Please give me an answer?')

Run the example locally:

git clone [e-mail]:ognjen-petrovic/react-imperative-mui-dialogs.git
cd react-imperative-mui-dialogs
npm install
cd example
npm install
cd ..
npm run start

Open the example at http://localhost:5173