Ninjas Practicing Multidimensionality
    Wondering what’s next for npm?Check out our public roadmap! »

    material-ui-confirm
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    Material-UI confirm GitHub license npm version Build Status Coverage Status

    Confirming user choice is a good thing to do, it should also be easy to do.

    This package provides simple confirmation dialogs built on top of @material-ui/core and straightforward to use thanks to React Hooks.

    Installation

    npm install --save material-ui-confirm

    Demo

    Edit material-ui-confirm demo

    Usage

    Wrap your app inside the ConfirmProvider component.
    Note: If you're using Material UI ThemeProvider, make sure ConfirmProvider is a child of it.

    import React from 'react';
    import { ConfirmProvider } from 'material-ui-confirm';
    
    const App = () => {
      return (
        <ConfirmProvider>
          {/* ... */}
        </ConfirmProvider>
      );
    };
    
    export default App;

    Call the useConfirm hook wherever you need the confirm function.

    import React from 'react';
    import Button from '@material-ui/core/Button';
    import { useConfirm } from 'material-ui-confirm';
    
    const Item = () => {
      const confirm = useConfirm();
    
      const handleClick = () => {
        confirm({ description: 'This action is permanent!' })
          .then(() => { /* ... */ })
          .catch(() => { /* ... */ });
      };
    
      return (
        <Button onClick={handleClick}>
          Click
        </Button>
      );
    };
    
    export default Item;

    API

    ConfirmProvider

    This component is required in order to render a dialog in the component tree.

    Props:
    Name Type Default Description
    defaultOptions object {} Overrides the default options used by confirm.

    useConfirm() => confirm

    This hook returns the confirm function.

    confirm([options]) => Promise

    This function opens a confirmation dialog and returns a promise representing the user choice (resolved on confirmation and rejected on cancellation).

    Options:
    Name Type Default Description
    title ReactNode 'Are you sure?' Dialog title.
    description ReactNode '' Dialog content.
    confirmationText ReactNode 'Ok' Confirmation button caption.
    cancellationText ReactNode 'Cancel' Cancellation button caption.
    dialogProps object {} Material-UI Dialog props.
    confirmationButtonProps object {} Material-UI Button props for the confirmation button.
    cancellationButtonProps object {} Material-UI Button props for the cancellation button.

    Useful notes

    Confirm by pressing Enter

    You can get this behavior by adding the autoFocus property to the confirmation button. This way the button is focused as soon as the dialog opens and hitting Enter naturally triggers a click.

    Locally
    const MyComponent = () => {
      // ...
    
      const handleClick = () => {
        confirm({ confirmationButtonProps: { autoFocus: true } })
          .then(() => { /* ... */ })
          .catch(() => { /* ... */ });
      };
    
      // ...
    };
    Globally
    const App = () => {
      return (
        <ConfirmProvider
          defaultOptions={{
            confirmationButtonProps: { autoFocus: true }
          }}
        >
          {/* ... */}
        </ConfirmProvider>
      );
    };

    Install

    npm i material-ui-confirm

    DownloadsWeekly Downloads

    9,648

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    24.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar