arts-react-bootstrap-modal

    4.2.4 • Public • Published

    React Bootstrap Modal

    Partly a port of jschr's bootstrap modal. Reimplements the Twitter Bootstrap Modal component in a React friendly way. Based on the original work of the react-bootstrap team.

    note: React bootstrap modal is compatible with bootstrap 3.3.4+ if you want to use it with an earlier version of bootstrap 3 you need to override the .modal-backdrop styles to be the most recent one.

    Features

    • Scoped focus
    • Stackable! (use with constraint)
    • Animated feedback when trying to close a "static" Modal
    • Straightforward API, no ModalTrigger or Overlay mixins to deal with

    Use

    var Modal = require('react-bootstrap-modal')
     
    class ModalExample extends React.Component {
     
      render(){
        let closeModal = () => this.setState({ open: false })
     
        let saveAndClose = () => {
          api.saveData()
            .then(() => this.setState({ open: false }))
        }
     
        return (
          <div>
            <button type='button'>Launch modal</button>
     
            <Modal
              show={this.state.open}
              onHide={closeModal}
              aria-labelledby="ModalHeader"
            >
              <Modal.Header closeButton>
                <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <p>Some Content here</p>
              </Modal.Body>
              <Modal.Footer>
                // If you don't have anything fancy to do you can use
                // the convenient `Dismiss` component, it will
                // trigger `onHide` when clicked
                <Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>
     
                // Or you can create your own dismiss buttons
                <button className='btn btn-primary' onClick={saveAndClose}>
                  Save
                </button>
              </Modal.Footer>
            </Modal>
          </div>
        )
      }
    }
     
    ReactDOM.render(<ModalExample />, document.body);

    Styles

    If you are already including Twitter Bootstrap styles (e.g. bootstrap.min.css), then include /lib/css/rbm-patch.css. If you want to use this module without Twitter Bootstrap, then include /lib/css/rbm-complete.css.

    If you do not like the Bootstrap visual look and feel, you can adjust variables.less to suit your needs and transpile it to css yourself.

    Components

    Modal

    The main Modal Component.

    Props

    • show: Boolean(default false) make the Modal visible or hidden

    • backdrop: Enum<'static', true, false>(default true) - Should the modal render a backdrop overlay. "static" backdrops are not dismissible by clicking the backdrop.

    • keyboard: Boolean(default true) Modal is dismissible via the esc key

    • transition Boolean(default true) Fade the entry and exit of the modal. You can also provide a Transition component from the react-transition-group v2 library to customize the animation more minutely.

    • attentionClass: String(default 'shake') - an animation class added to the modal when a "static" backdrop is clicked, set to nothing if no animation is desired

    • container: Node(default document.body), a DOM Node to append the modal too

    • onEnter: handler fires right before the Modal animates in

    • onEntering: handler fires as the Modal starts entering

    • onEntered: handler fires after the enter animation finishes

    • onExit: handler fires right before the Modal animates out

    • onExiting: handler fires as the Modal starts exiting

    • onExited: handler fires after the exit animation finishes

    Modal.Header

    The Header section of Modal. If not included be sure to add an aria-labelledby elsewhere to keep the Modal accessible.

    Props

    • closeButton: Boolean(default true) - render a close button or not
    • onClose: Function() - a Handle when the close button is clicked. if left undefined the Header will automatically wire itself into the parent Modal onHide(), so you only need to specify a handler if you want a different behavior

    Modal.Title

    Modal.Body

    The main content of the Modal, a convenience Component for: <div className='modal-body'>content</div>

    Modal.Footer

    The bottom footer of the Modal, a convenience Component for: <div className='modal-footer'>content</div>

    Modal.Dismiss

    A dismiss button for the Parent Modal. Dismiss button will trigger its parent Modal onHide() handler. You don't need to use a Dismiss button, they are just a Convenience Component.

    Modal.BaseModal

    BaseModal represents just the modal markup without any of the logic to render it to the document.body. It is generally not recommended that you work with this component directly. You can use it if you really want to render a Modal inline.

    Install

    npm i arts-react-bootstrap-modal

    DownloadsWeekly Downloads

    6

    Version

    4.2.4

    License

    MIT

    Unpacked Size

    54.4 kB

    Total Files

    20

    Last publish

    Collaborators

    • artsrunkar