Skip to content

nicolas-van/react-bootstrap-confirmation

Repository files navigation

react-bootstrap-confirmation

This project is looking for maintainers. If you want to support this projet you can create an issue explaining your motivation to support it. Please only apply if your are serious about maintaining a library project on Github.

npm version

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"