Reactstrap confirm

An easy to use promise based confirm dialog for reactstrap.

The objective of this package is to offer a simple and easy way for developers to show confirm dialogs within their apps without having to worry about states or having to repeat the same components in many places.

Demo: https://algm.github.io/reactstrap-confirm

Installation

Simply use npm

npm i --save reactstrap-confirm

You can use yarn as well

yarn add reactstrap-confirm

Dependencies

You must manually install react, react-dom and reactstrap in your project in order for this module to work correctly.

Usage

Simply, import the module and call it as a function anywhere in your code.

import confirm from "reactstrap-confirm";

// ...code

let result = await confirm(); //will display a confirmation dialog with default settings

console.log(result); //if the user confirmed, the result value will be true, false otherwhise

You can also pass options to the confirm function:

confirm({
    title: (
        <>
            Content can have <strong>JSX</strong>!
        </>
    ),
    message: "This is a custom message",
    confirmText: "Custom confirm message",
    confirmColor: "primary",
    cancelColor: "link text-danger"
});

The above example will render a customized dialog.

Requesting text input

If you need to capture a small text input alongside the confirmation dialog, use the bundled confirmWithInput helper. It renders the same modal styling as confirm but adds a controlled <Input /> from reactstrap and resolves the typed value (or null if the dialog is dismissed):

import confirm, { confirmWithInput } from "reactstrap-confirm";

const name = await confirmWithInput({
    title: "Rename file",
    inputLabel: "New name",
    inputProps: { placeholder: "Type the new file name" }
});

You can customize all modal props (message, title, button text, etc.) plus supply:

| Option | Effect | Default value | | ----------- | ------------------------------------------------------------------- | ------------- | | inputLabel | Optional label text rendered above the input | empty | | inputProps | Props passed directly to the underlying reactstrap <Input /> | empty | | initialValue| Sets the starting value of the input | empty |

Available options

| Option | Effect | Default value | | ---------------- | ------------------------------------------------------------------------------------------------------------- | ------------- | | message | Sets the message body of the confirmation dialog | Are you sure? | | title | Sets the title of the dialog window | Warning! | | confirmText | Sets the text of the confirm button | Ok | | cancelText | Sets the text of the cancel button | Cancel | | confirmColor | Sets the color class of the confirm button (see reactstrap docs) | primary | | cancelColor | Sets the color class of the cancel button (see reactstrap docs) | empty | | size | Sets the size property for the modal component (see reactstrap docs) | empty | | buttonsComponent | Can receive a component for rendering the buttons. The component will receive the onClose function as a prop. | empty |