react-open-dialog

Open Dialog as function call or react component.

Features

• Easy to use
• Open Dialog as function call.
• Open Dialog as react component.
• Get nice and user friendly confirm dialog.
• Create your own custom Dialog with jsx

Demo

Demo Page

Install

npm install --save react-open-dialog

Peer Dependency

This package has a peer dependency with @material-ui/core package so make sure to install this also.

npm install --save @material-ui/core

Usage

Open Confirm Dialog as function

As Function

import React from 'react'

import { DialogUtils } from 'react-open-dialog'

const App = () => {
  return (
    <div>
      <button
        onClick={() => {
          DialogUtils.openConfirmDialog({
            title: 'Dilog Title',
            message:
              'Elit amet esse minim elit pariatur voluptate dolor non et. Nulla ad do amet amet mollit duis voluptate magna. Nisi in non cillum amet magna consequat occaecat adipisicing. Ex consequat qui mollit eu exercitation et do adipisicing reprehenderit. Laborum sint eu sit sit ea anim Lorem id ut qui consectetur proident eiusmod laborum. Ipsum aliquip duis fugiat veniam nulla ut.'
          })
        }}
      >
        Open Confirm Dialog
      </button>
    </div>
  )
}

export default App

Open Confirm Dialog as component

As Component

<ConfirmDialog
  anchorElement={
    <div
      style={{
        border: '1px solid black',
        padding: 3,
        marginRight: 20
      }}
    >
      Open Confirm Dialog
    </div>
  }
  title='Dilog Title'
  message='Elit amet esse minim elit pariatur voluptate dolor non et. Nulla ad do amet amet mollit duis voluptate magna. Nisi in non cillum amet magna consequat occaecat adipisicing. Ex consequat qui mollit eu exercitation et do adipisicing reprehenderit. Laborum sint eu sit sit ea anim Lorem id ut qui consectetur proident eiusmod laborum. Ipsum aliquip duis fugiat veniam nulla ut.'
/>

Options For Confirm Dialog

| Name | Type | Description | | --------------------------- | -------------- | ------------------------------------------------------------------------------------- | | title | string or node | Title of dialog | | message | string or node | Message for user to confirm something. | | onClickYes | function | Trigger when use clicked on YES button | | onClickNo | function | Trigger when use clicked on NO button | | yesText | string | To change the text from YES to something else | | noText | string | To change the text from NO to something else | | disableBackdropClick | boolean | Whether to close dialog when user clicks outside (Default-false) | | closeOnButtonClicked | boolean | Whether to close dialog when user clicks any of the button(Yes/NO) (Default-true) | | yesButtonProps | object | Material UI button props | | noButtonProps | object | Material UI button props | | dialogProps | object | Material UI Dialog props | | titleProps | object | Material UI DialogTitle props | | anchorElement | string or node | Anchor Element to hold dialog (Only available when using as a component) | | anchorElementContainerStyle | object | css as a object (Only available when using as a component) | | defaultOpen | boolean | make dialog open by default (Default-false) (Only available when using as a component)|

Open Custom Dialog as function

As Function

import React from 'react'

import { DialogUtils } from 'react-open-dialog'

const App = () => {
  return (
    <div>
      <button
        onClick={() => {
          DialogUtils.openCustomDialog({
            title: 'Custom Dialog',
            customRender: ({ closeDialog }) => {
              return (
                <div>
                  <p>My very first custom dialog </p>
                  <button
                    onClick={() => {
                      closeDialog()
                    }}
                  >
                    Close
                  </button>
                </div>
              )
            }
          })
        }}
      >
        Open Custom Dialog
      </button>
    </div>
  )
}

export default App

Open Confirm Dialog as component

As Component

<CustomDialog
  anchorElement={
    <div style={{ border: '1px solid black', padding: 3 }}>
      Open Custom Dialog
    </div>
  }
  title='Dilog Title'
>
  {({ closeDialog }) => {
    return (
      <div>
        <p>My very first custom dialog </p>
        <button
          onClick={() => {
            closeDialog()
          }}
        >
          Close
        </button>
      </div>
    )
  }}
</CustomDialog>

Options For Custom Dialog

| Name | Type | Description | | --------------------------- | ----------------- | ----------------------------------------------------------------------------- | | title | string or node | Title of dialog | | customRender | callback function | function that returns valid JSX (eg: ({closeDialog})=><div>Hello JSX</div>) | | disableBackdropClick | boolean | Whether to close dialog when user clicks outside (Default-false) | | dialogProps | object | Material UI Dialog props | | titleProps | object | Material UI DialogTitle props | | anchorElement | string or node | Anchor Element to hold dialog (Only available when using as a component)| | anchorElementContainerStyle | object | css as a object (Only available when using as a component)| | defaultOpen | boolean | make dialog open by default (Default-false)(Only available when using as a component)|

Screenshots

Confirm Dialog

Custom Dialog

License

MIT © githubprabin143