# react-bootstrap4-modal

> A simple Bootstrap 4 modal component in React

Latest version **3.0.11** (published 2025-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-bootstrap4-modal
pnpm add react-bootstrap4-modal
yarn add react-bootstrap4-modal
bun add react-bootstrap4-modal
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.0.11 |
| Published | 2025-07-22 |
| First published | 2017-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 43.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 19 |
| Author | Nat Budin |
| Maintainers | nbudin |

## Links

- npm: https://www.npmjs.com/package/react-bootstrap4-modal
- Repository: https://github.com/nbudin/react-bootstrap4-modal
- Homepage: https://github.com/nbudin/react-bootstrap4-modal#readme
- Issues: https://github.com/nbudin/react-bootstrap4-modal/issues
- npm.io page: https://npm.io/package/react-bootstrap4-modal

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1

## Recent versions

- 3.0.11 (latest) — 2025-07-22
- 3.0.10 — 2025-02-23
- 3.0.9 — 2025-02-22
- 3.0.8 — 2024-11-20
- 3.0.7 — 2024-11-10
- 3.0.6 — 2024-11-10
- 3.0.5 — 2024-11-10
- 3.0.0 — 2024-11-10
- 2.0.0 — 2021-06-06
- 1.7.6 — 2021-05-16
- 1.7.5 — 2020-06-30
- 1.7.4 — 2019-08-14
- 1.7.3 — 2019-08-14
- 1.7.2 — 2019-06-19
- 1.7.1 — 2019-05-21
- … 14 more at https://npm.io/package/react-bootstrap4-modal/versions

## README

# react-bootstrap4-modal

<a href="https://nodei.co/npm/react-bootstrap4-modal/"><img src="https://nodei.co/npm/react-bootstrap4-modal.png?downloads=true&downloadRank=true&stars=true"></a>

A really simple implementation of Bootstrap 4 modal dialogs for React.  Also works with Bootstrap 5!

## Usage

```jsx
import React from 'react';
import Modal from 'react-bootstrap4-modal';

class Spacecraft extends React.Component {
  // event handling methods go here

  render() {
    return (
      <Modal visible={true} onClickBackdrop={this.modalBackdropClicked}>
        <div className="modal-header">
          <h5 className="modal-title">Red Alert!</h5>
        </div>
        <div className="modal-body">
          <p>Enemy vessel approaching!</p>
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-secondary" onClick={this.onPanic}>
            Panic
          </button>
          <button type="button" className="btn btn-primary" onClick={this.onFirePhasers}>
            Fire phasers
          </button>
        </div>
      </Modal>
    );
  }
}
```

With react-bootstrap4-modal, you're responsible for rendering all the inner content of the modal dialog.  react-bootstrap4-modal simply provides the logic for rendering the modal itself and its backdrop.  In addition, it emulates the browser shenanigans necessary to support Bootstrap 4's built-in CSS transitions (essentially, by delaying some of the effects of changing the `visible` prop for 150 milliseconds).

react-bootstrap4-modal also contains a `ConfirmModal` component, which is intended as an easy responsive replacement for the browser's `confirm` built-in function.

### Modal Props

Prop name       | Type                | Description
----------------|---------------------|-------------
visible         | boolean (required)  | Whether or not the modal is currently visible
className       | string (optional)   | If present, additional class names that will be added to the `<div class="modal">`.
dialogClassName | string (optional)   | If present, additional class names that will be added to the `<div class="modal-dialog">` (such as `modal-lg` or `modal-sm`).
onClickBackdrop | function (optional) | If present, a function that will be called when the user clicks on the backdrop behind the modal
wrapperProps    | object (optional)   | If present, additional props that will be added to the wrapper div around the modal and its backdrop.
fade            | boolean (optional)  | If true (default) will apply the fade class and some timeouts to fade the modal and backdrop in, if false the transition will be instant and the fade class will not be applied

Any other props besides these will be added to the `<div class="modal">`.

### ConfirmModal Props

Prop name       | Type                | Description
----------------|---------------------|-------------
visible         | boolean (required)  | Whether or not the modal is currently visible
onOK            | function (required) | A function that will be called when the user clicks "OK"
okText          | string (optional)   | The text that is displayed on the OK button
onCancel        | function (required) | A function that will be called when the user clicks "Cancel"
cancelText      | string (optional)   | The text that is displayed on the Cancel button
disableButtons  | boolean (optional)  | If true, the OK and Cancel buttons will be disabled

Any other props besides these will be passed to the `Modal` component this renders (so you can use any of the props from `Modal` here as well).

## License

react-bootstrap4-modal is Copyright &copy; 2017-2021 Nat Budin and released under the terms and conditions of the MIT License.  See the COPYING file for more details.

---
_Source: https://npm.io/package/react-bootstrap4-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._