react-confirm-service v1.6.1

react-confirm-service

Provides a service to show alerts, confirmations, and choices in react apps.

Installation

npm install react-confirm-service

Basic Usage

First you start by using the ConfirmComponentHost in your application:

import { ConfirmComponentHost } from "react-confirm-service";

...

<MyApp>
    <ConfirmComponentHost
        renderAlert={props => (
            <Notification
                isOpen={props.isVisible}
                onClose={props.onClose}
            >
                {props.message}
            </Notification>
        )}
        renderConfirm={props => (
            <Dialog
                isOpen={props.isOpen}
                title={props.title}
            >
                {/* render content, buttons, ... */}
            </Dialog>
        )}
        renderChoice={props => {
            const options = props.options.map(option => (
                <li
                    key={option.key}
                    onClick={() => props.onConfirm(option)}
                >
                    {option.key}
                </li>
            ));

            return (
                <Dialog
                    isOpen={props.isOpen}
                    title={props.title}
                >
                    <>
                        <ul>
                            {options}
                        </ul>
                        <button onClick={props.onCancel}>Cancel</button>
                    </>
                </Dialog>
            );
        }}
    />
</MyApp>

The implementation depends on the UI components you want to use to show alerts, confirmation, and choice dialogs.

After that, you can use the ConfirmService anywhere in your application:

import { ConfirmService } from "react-confirm-service";

...

ConfirmService.alert("Something happened", "info");

...

ConfirmService.confirm({
    message: "Close without saving?"
})
    .then(/* Yes */)
    .catch(/* No */);

...

ConfirmService.choose({
    title: "Fruits",
    options: [
        { key: "Bananas" },
        { key: "Apples" },
        { key: "Pineapples" },
    ]
})
    .then(choice => /* ... */)
    .catch(/* cancelled */)

How to use the ConfirmComponentHost

The ConfirmComponentHost accepts the following props:

You can use the ConfirmComponentHost in multiple places in your application. The ConfirmService will use the last one which was mounted.

renderAlert

renderAlert is a function with one parameter of type AlertRenderProps:

renderConfirm

renderConfirm is a function with one parameter of type ConfirmRenderProps:

renderChoice

renderChoice is a function with one parameter of type ChoiceRenderProps:

How to use the ConfirmService

Alert

To show an alert to the user, call the alert function. It has the following parameters:

Confirm

To show a confirmation to the user, use the confirm function. It takes one options parameter:

This function returns a Promise. It will be resolved if the confirmation is accepted and rejected if the confirmation is denied.

Choose

To show a choice to the user, use the choose function. It takes one options parameter:

This function returns a Promise. It will be resolved with the selected option and rejected if the choice is cancelled.

The choose function is a generic function. So you can provide a custom type for your options. The generic parameter is optional.

Your custom type must have a key property of type string | number.

interface CustomOption {
    key: string | number,
    data: MyData,
}

ConfirmService.choose<CustomOption>({
    options: [
        { key: "1", data: myData1 },
        { key: "2", data: myData2 },
        { key: "3", data: myData3 }
    ]
});