react-bootstrap-confirmation

A library to easily display alerts and confirmations using React and Bootstrap. With react-bootstrap-confirmation displaying an alert or a confirmation dialog is just as easy as calling a function:

import {alert} from 'react-bootstrap-confirmation';

alert('Something very wrong happened!');

See the demo here.

Installation

npm install --save react-bootstrap-confirmation

Usage

alert(message[, options])

An asynchronous function that will return once the alert has been dismissed.

Example

import React, {useState} from 'react';
import {alert} from 'react-bootstrap-confirmation';

const AlertButton = () => {
  const display = async () => {
    await alert('Something very wrong is happening!');
    console.log('The alert has finished displaying');
  };
  return (
    <button type="button" className="btn btn-primary" onClick={display}>
      Display alert
    </button>
  );
};

Options

| Parameter name | Type | Description | Default | | -------------- | ---- | ----------- | ------- | | title | string | A facultative title to use for the modal. | undefined | | okText | string | The text of the "OK" button | "OK" | | okButtonStyle | string | The style of the "OK" button. Must correspond to one of the 6 button styles of Bootstrap. | "primary" |

confirm(message[, options])

An asynchronous function that will return true if the user clicks the "OK" button and false in the other cases.

Example

import React, {useState} from 'react';
import {confirm} from 'react-bootstrap-confirmation';

const ConfirmButton = () => {
  const display = async () => {
    const result = await alert('Are you really sure?');
    console.log('True if confirmed, false otherwise:', result);
  };
  return (
    <button type="button" className="btn btn-primary" onClick={display}>
      Display alert
    </button>
  );
};

Options

| Parameter name | Type | Description | Default | | -------------- | ---- | ----------- | ------- | | title | string | A facultative title to use for the modal. | undefined | | okText | string | The text of the "OK" button | "OK" | | okButtonStyle | string | The style of the "OK" button. Must correspond to one of the 6 button styles of Bootstrap. | "primary" | | cancelText | string | The text of the "Cancel" button | "Cancel" | | cancelButtonStyle | string | The style of the "Cancel" button. Must correspond to one of the 6 button styles of Bootstrap. | "secondary" |