Nauseating Pumpkin Mush

    react-modal-bootstrap

    1.1.1 • Public • Published

    React Modal Bootstrap

    Modal component for React with bootstrap style.

    Installation

    NPM

    npm install --save react-modal-bootstrap

    Bower

    bower install --save react-modal-bootstrap

    Usage

    Dependencies

    Webpack:

    require('path/to/bootstrap.css');

    Without Webpack:

    <link rel="stylesheet" type="text/css" href="path/to/bootstrap.css">

    JS

    import {
      Modal,
      ModalHeader,
      ModalTitle,
      ModalClose,
      ModalBody,
      ModalFooter
    } from 'react-modal-bootstrap';
    ...
    state = {
      isOpen: false
    };
     
    openModal = () => {
      this.setState({
        isOpen: true
      });
    };
     
    hideModal = () => {
      this.setState({
        isOpen: false
      });
    };
    ...
    <Modal isOpen={this.state.isOpen} onRequestHide={this.hideModal}>
      <ModalHeader>
        <ModalClose onClick={this.hideModal}/>
        <ModalTitle>Modal title</ModalTitle>
      </ModalHeader>
      <ModalBody>
        <p>Ab ea ipsam iure perferendis! Ad debitis dolore excepturi
          explicabo hic incidunt placeat quasi repellendus soluta,
          vero. Autem delectus est laborum minus modi molestias
          natus provident, quidem rerum sint, voluptas!</p>
      </ModalBody>
      <ModalFooter>
        <button className='btn btn-default' onClick={this.hideModal}>
          Close
        </button>
        <button className='btn btn-primary'>
          Save changes
        </button>
      </ModalFooter>
    </Modal>

    Styles

    Default:

    backdropStyles = {
      base: {
        background: 'rgba(0, 0, 0, .7)',
        opacity: 0,
        visibility: 'hidden',
        transition: 'all 0.4s',
        overflowX: 'hidden',
        overflowY: 'auto'
      },
      open: {
        opacity: 1,
        visibility: 'visible'
      }
    };
     
    dialogStyles = {
      base: {
        top: -600,
        transition: 'top 0.4s'
      },
      open: {
        top: 0
      }
    }

    Custom:

    You can set custom styles vie backDropStyles, dialogStyles prop.

    UMD

    <link rel="stylesheet" type="text/css" href="path/to/bootstrap.css">
    <script src="path/to/react-modal-bootstrap/dist/react-modal-bootstrap.js"></script>
    ...
    var Modal = window.ReactModalBootstrap.Modal;
    var ModalHeader = window.ReactModalBootstrap.ModalHeader;
    var ModalTitle = window.ReactModalBootstrap.ModalTitle;
    var ModalClose = window.ReactModalBootstrap.ModalClose;
    var ModalBody = window.ReactModalBootstrap.ModalBody;
    var ModalFooter = window.ReactModalBootstrap.ModalFooter;
    ...

    Example here

    Props

    Name Type Default Description
    isOpen bool false
    backdrop bool true Close when click on backdrop
    keyboard bool true Close when press ESC
    size string '' 'modal-lg' or 'modal-sm'
    onRequestHide function function(){} Callback when modal request hide
    backdropStyles object {} Styles object (Radium)
    dialogStyles object {} Styles object (Radium)

    Example

    View demo or example folder.

    Install

    npm i react-modal-bootstrap

    DownloadsWeekly Downloads

    512

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • minhtranite
    • vn38minhtran