material-confirm-alert

A simple material-ui confirmation alert based on React Context API.

Installation

This library requires React and @material-ui/core

Install and save the package as dependencies of the project.

npm i --save material-confirm-alert

Usage

First, import the ConfirmAlertProvider from the package and use it to wrap your component wherever you want to use the confirmation alert. If you want to use it across the whole app, wrap your App component inside it.

Note: If you are using material-ui ThemeProvider, wrap the ConfirmAlertProvider inside it.

import { ConfirmAlertProvider } from 'material-confirm-alert';
...

export const App = () => {
    return (
        <ConfirmAlertProvider>
            ...
        </ConfirmAlertProvider>
    )
}

Next, inside your component where you want to use the confirmation alert, import the useConfirmAlert hook from the package. This hook returns a confirm function which will be used to call confirmation alert.

import { useConfirmAlert } from 'material-confirm-alert';
...

const MyComponent = () => {
    const confirm = useConfirmAlert();
    const handleClick = async () => {
        // confirm returns a promise and can be used with async/await
        const result = await confirm('Do you want to delete?');
        if(result) {
            // Handle operation when user confirm
            ...
        } else {
            // Handle operation when user cancel
            ...
        }
    }

    return (
        <Button onClick={handleClick}>Delete</Button>
    );
}

Demo

material-confirm-alert-demo

API

<ConfirmAlertProvider />

This is a Provider generated using the React Context API. The component which is using the confirmation alert requires to be wrapped inside this Provider.

Example -

// Import
import { ConfirmAlertProvider } from 'material-confirm-alert';
...

// App Component
export const App = () => {
    ...
    // return
    return (
        <ConfirmAlertProvider>
            // children
            ...
        </ConfirmAlertProvider>
    )
}

useConfirmAlert()

returns confirm function

Example -

// imports
import { useConfirmAlert } from 'material-confirm-alert'
...

// Inside components
const MyComponent = () => {
    const confirm = useConfirmAlert();
    ...
}

confirm(options, callback)

This function is used to call the confirmation dialog. It takes an object or a string as parameter. It returns a promise and can be used with async/await. The promise will resolve into boolean based on user choice.

| Parameters | Type | Optional | Description | | ---------- | ------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | object or string or (empty) | Yes | Sets the options for the confirmation dialog. Check options API for more details. If only string is passed, then it will be the title of the confirmation dialog. |

Example -

// Inside Components
const MyComponent = () => {
    const confirm = useConfirmAlert();
    const handleClick = async () => {
        const result = await confirm('Do you want to delete?');
        if(result) {
            // Handle operation when user confirm
        } else {
            // Handle operation when user cancel
        }
    }
    // return
    ...
}

options

This object can be used to set the optional parameters for the confirmation dialog.

| Parameters | Type | Default | Description | | ------------------ | -------- | --------------- | ------------------------------------------------ | | title | string | 'Are you sure?' | Sets the title for the confirmation dialog | | description | string | (empty) | Sets the description for the confirmation dialog | | okButtonText | string | 'Ok' | Sets the 'Ok' button text | | cancelButtonText | string | 'Cancel' | Sets the 'Cancel' button text |

Example -

// Inside Components
const MyComponent = () => {
    const confirm = useConfirmAlert();
    const handleClick = async () => {
        const result = await confirm({
            'title': 'Do you want to delete this item?',
            'description': 'This cannot be undone once deleted!',
            'okButtonText': 'Yes',
            'cancelButtonText': 'No'
        });
        if(result) {
            // Handle operation when user confirm
        } else {
            // Handle operation when user cancel
        }
    }
    // return
    ...
}