bs4-modal-react

bs4-modal-react

See the storybook demos here

Install

npm install bs4-modal-react
npm install bootstrap@4.0.0-beta

Usage

Make sure you include the Boostrap 4 CSS as that is not included in this package.

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";

import { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter } from "bs4-modal-react";

class Demo extends Component {
  state = {
    visible: false
  };

  onShow = () => this.setState({ visible: true });
  onHide = () => this.setState({ visible: false });

  onSave = () => {
    alert("Saving changes");
    this.onHide();
  };

  render() {
    const { visible } = this.state;
    return (
      <div>
        <button type="button" className="btn btn-primary" onClick={this.onShow}>
          Launch modal
        </button>
        <Modal visible={visible} onHide={this.onHide}>
          <ModalHeader>
            <ModalTitle>Modal title</ModalTitle>
          </ModalHeader>
          <ModalBody>Woohoo, you're reading this text in a modal!</ModalBody>
          <ModalFooter>
            <button type="button" className="btn btn-secondary" onClick={this.onHide}>
              Close
            </button>
            <button type="button" className="btn btn-primary" onClick={this.onSave}>
              Save changes
            </button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}