Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

bs4-modal-react

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bs4-modal-react

bs4-modal-react React component

  • 0.1.0
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created

bs4-modal-react

Travis npm package Coveralls

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>
    );
  }
}

FAQs

Package last updated on 17 Sep 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts