Skip to content
This repository has been archived by the owner on Sep 8, 2020. It is now read-only.

backstage-ui/backstage-modal

Repository files navigation

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