Provides a service to show alerts, confirmations, and choices in react apps.
npm install react-confirm-service
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 */)The ConfirmComponentHost accepts the following props:
| Property | Required | Description |
|---|---|---|
| renderAlert | yes | Provide a function which renders the alert component. See renderAlert |
| renderConfirm | yes | Provide a function which renders the confirmation component. See renderConfirm |
| renderChoice | no | Provide a function which renders the choice component. See renderChoice |
| strings | no | Takes an object to provide default values for yes, no, and cancel button captions. Use this to localize these texts. |
| alertDurations | no | You can provide an object to set the durations of an alert for each severity in ms. The defaults are: info: 3000, success: 3000, warning: 10000, error: 10000. |
You can use the ConfirmComponentHost in multiple places in your application. The ConfirmService will use the last one which was mounted.
renderAlert is a function with one parameter of type AlertRenderProps:
| Property | Description |
|---|---|
| isVisible | Alert is shown or not. |
| message | The message to display to the user. |
| duration | How long should the message be displayed, in ms. |
| severity | The severity of the alert. Use different icons and/or colors. |
| onClose | Call this function when the alert should close. |
renderConfirm is a function with one parameter of type ConfirmRenderProps:
| Property | Description |
|---|---|
| isOpen | Is the confirmation dialog opened? |
| title | The optional title of the confirmation. |
| message | The message of the confirmation. |
| confirmCaption | The caption of the button to accept the confirmation. |
| onConfirm | Call this function when the button to accept is pressed. |
| denyCaption | The caption of the button to deny the confirmation. Do not display this button if the caption is an empty string (""). |
| onDeny | Call this function when the button to deny is pressed. |
renderChoice is a function with one parameter of type ChoiceRenderProps:
| Property | Description |
|---|---|
| isOpen | Is the choice dialog opened? |
| title | The optional title of the choice. |
| options | The list of selectable options to show. |
| type | The optional type of the options to distinguish when rendering. |
| cancelCaption | The caption of the action to cancel the choice. |
| onConfirm | Call this function when a choice is selected. |
| onCancel | Call this function when the choice is cancelled. |
| extra | Optional custom data. |
To show an alert to the user, call the alert function. It has the following parameters:
| Parameter | Required | Description |
|---|---|---|
| message | yes | The message to display. |
| severityOrOptions | yes | The severity of the alert or an options object. |
To show a confirmation to the user, use the confirm function. It takes one options parameter:
| Property | Required | Description |
|---|---|---|
| title | no | The title of the confirmation. |
| message | yes | The message of the confirmation. |
| yes | no | The caption of the button to accept. If not provided the yes property of strings is used. The default is "Yes". |
| no | no | The caption of the button to deny. If not provided the no property of strings is used. The default is "No". If you pass null, the button is not displayed. |
This function returns a Promise. It will be resolved if the confirmation is accepted and rejected if the confirmation is denied.
To show a choice to the user, use the choose function. It takes one options parameter:
| Property | Required | Description |
|---|---|---|
| title | no | The title of the choice. |
| options | yes | The possible choices. |
| type | no | The optional type of the options to distinguish when rendering. |
| cancelCaption | no | The caption of the cancel action. If not provided the cancel property of strings is used. The default is "Cancel". |
| extra | no | Optional custom data. |
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 }
]
});