Neurotoxin Powered Marketing

    backstage-modal

    0.3.2 • Public • Published

    backstage-modal

    Build Status

    Backstage Modal React component

    Installing

    npm install backstage-modal --save

    Components

    <Modal />

    Main component that includes the overlay, the modal window and its contents.

    Use children to render the inner content of the modal window.

    Props

    • isOpen: flag indicating wether the modal is opened or not (default false);
    • title: title of the modal window;
    • width: CSS width of the modal window (default 500px);
    • onCloseRequest: callback called when the user attempts to close the modal:
      • by clicking on the close button;
      • by clicking on the overlay;
      • by pressing the ESC key.

    <ModalBody />

    Optional child component to wrap content and get some nice default styles.

    <ModalFooter />

    Optional child component to wrap content and get some nice default styles along with a separator.

    Example

    import React, {Component} from 'react';
    import ReactDOM from "react-dom";
    import Modal, {ModalBody, ModalFooter} from 'backstage-modal';
     
    class Example extends Component {
      constructor(){
        this.state = {
          isOpen: true
        };
      }
     
      onCloseRequest(){
        this.setState({isOpen: false});
      }
     
      render(){
        return (
          <Modal isOpen={this.state.isOpen} title="Backstage Modal" onCloseRequest={() => this.onCloseRequest}>
            <ModalBody>
              <p>Body</p>
            </ModalBody>
            <ModalFooter>
              <button type="button">OK</button>
            </ModalFooter>
          </Modal>
        );
      }
    }
     
    ReactDOM.render(<Example />, document.getElementById('container'));

    Keywords

    none

    Install

    npm i backstage-modal

    DownloadsWeekly Downloads

    1,924

    Version

    0.3.2

    License

    MIT

    Last publish

    Collaborators

    • andrewsmedina
    • mdionisio
    • metal
    • raphamorim
    • rfloriano
    • ricobl
    • siminino
    • vierno