muibox

Promise-based dialog boxes (alert, confirm, prompt) using Material-UI

Demo

Install

$ npm install muibox --save

Usage

Simply wrap all components that should display dialog boxes with the DialogProvider component, e.g. by wrapping your router with it.

import { DialogProvider } from 'muibox'

// somewhere at the root of your app
<DialogProvider>
  {/* the rest of your app belongs here, e.g. the router */}
</DialogProvider>

You can then display dialog boxes with the withDialog HOC and the injected dialog prop in your components.

import React from 'react'
import { withDialog } from 'muibox'

class MyComponent extends React.Component {
  render () {
    const { dialog } = this.props
    return (
      <div>
        <button onClick={() => dialog.alert('Warning!')}>
          Click me
        </button>
      </div>
    )
  }
}

export default withDialog()(MyComponent)

If use React 16.8+, you can import useDialog hook to get dialog context directly.

import React from 'react'
import { useDialog } from 'muibox'

function MyComponent () {
  const dialog = useDialog()
  return (
    <div>
      <button onClick={() => dialog.alert('Warning!')}>
        Click me
      </button>
    </div>
  )
}

export default MyComponent

Alert

dialog.alert('Warning!')
  .then(() => console.log('clicked ok'))

API

dialog.alert(options)

• options (object|string) – The alert dialog settings. If options is a string, set dialog message to display.
• options.title (string) – The dialog title to display.
• options.message (string|jsx) – The dialog message to display or a custom JSX element to be injected on Material-UI DialogContent.
• options.ok (object) { text, color, variant, startIcon, endIcon } - The positive button text to display, color, variant and left/right icon (jsx), following mateiral-ui types. Defaults OK, primary, text, undefined, undefined respectively.

Confirm

dialog.confirm('Are you sure?')
  .then(() => console.log('clicked ok'))
  .catch(() => console.log('clicked cancel'))

API

dialog.confirm(options)

• options (object|string) – The confirm dialog settings. If options is a string, set dialog message to display.
• options.title (string) – The dialog title to display.
• options.message (string|jsx) – The dialog message to display or a custom JSX element to be injected on Material-UI DialogContent.
• options.ok (object) { text, color, variant, startIcon, endIcon } - The positive button text to display, color, variant and left/right icon (jsx), following mateiral-ui types. Defaults OK, primary, text, undefined, undefined respectively.
• options.cancel (object) { text, color, variant, startIcon, endIcon } - The positive button text to display, color, variant and left/right icon (jsx), following mateiral-ui types. Defaults OK, primary, text, undefined, undefined respectively.
• options.throwOnCancel (boolean) - defaults to true, optional flag to disable old behavior of throwing error when cancel button is clicked and when dialog is dismissed, setting to false would resolve cancel button press with false as value and would throw when dialog is dismissed without selection.

Prompt

dialog.prompt('Enter your name:')
  .then((value) => console.log('clicked ok', value))
  .catch(() => console.log('clicked cancel'))

API

dialog.prompt(options)

• options (object|string) – The prompt dialog settings. If options is a string, set dialog message to display.
• options.title (string) – The dialog title to display.
• options.message (string|jsx) – The dialog message to display or a custom JSX element to be injected on Material-UI DialogContent.
• options.placeholder (string) – The placeholder attribute for the input. Default is blank ''.
• options.ok (object) { text, color, variant, startIcon, endIcon } - The positive button text to display, color, variant and left/right icon (jsx), following mateiral-ui types. Defaults OK, primary, text, undefined, undefined respectively.
• options.cancel (object) { text, color, variant, startIcon, endIcon } - The positive button text to display, color, variant and left/right icon (jsx), following mateiral-ui types. Defaults OK, primary, text, undefined, undefined respectively.
• options.required (bool) - If true, the label is displayed as required and the input will be required. Default false.
• options.defaultValue (string|number) - The default value of the Input element.
• options.inputProps (object) - The props for the input html element. For instance, max length. Optional

License

MIT