Material-ui-confirmation NPM

material-ui-confirmation

React hook to seamlessly use customizable confirmation dialogs from @material-ui/core without managing any open/close state

Install

npm install --save material-ui-confirmation

yarn add material-ui-confirmation

Usage

Wrap your app with the ConfirmationDialogProvider

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfirmationDialogProvider } from 'material-ui-confirmation';

import App from './App';

ReactDOM.render(
  <ConfirmationDialogProvider>
    <App />
  </ConfirmationDialogProvider>,
  document.getElementById('root'),
);

Then use the useConfirmationDialog hook anywhere down the line

import React from 'react';

import { useConfirmationDialog } from 'material-ui-confirmation';

const App = () => {
  const { getConfirmation } = useConfirmationDialog();

  return (
    <button
      onClick={() => {
        getConfirmation({
          title: 'Is it working?',
          body: "Let's check if it is working",
          onAccept: () => {
            alert('Accepted');
          },
          onDecline: () => {
            alert('Declined');
          },
          dialogProps: {
            disableBackdropClick: true,
          },
          acceptButtonProps: {
            autoFocus: false,
            variant: 'contained',
          },
          declineText: 'Leave me alone',
        });
      }}
    >
      Confirm
    </button>
  );
};

export default App;