@lightspeed/cirrus-modal NPM

Modal

Cirrus component for displaying Modals.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-modal

Or using npm:

npm i -S @lightspeed/cirrus-modal

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-modal/scss';

React Component

`<Modal>`

Prop	Type	Description	Default
`isOpen`	boolean	Used to show the modal	N/A
`onAfterOpen`	function	Callback invoked after the modal is shown	null
`onRequestClose`	function	Callback invoked when the modal is closed	null
`closeOnEsc`	boolean	Determines whether the user can use the ESC key to dismiss the modal.	true
`shouldCloseOnOverlayClick`	boolean	Determines whether the user can dismiss the modal by clicking on the overlay.	true
`aside`	boolean	When specified indicates that the modal should be displayed as an aside.	false

`<ModalHeader>`

Prop	Type	Description	Default
`children`	React.ReactNode	The content to display inside the header	N/A
`onCloseClicked`	function	Callback invoked when the close button is clicked	null
`showCloseButton`	boolean	When specified indicates that a close button should be displayed.	true

`<ModalBody>`

Prop	Type	Description	Default
`children`	React.ReactNode	The content to display inside the modal body	N/A
`scroll`	boolean	When specified indicates tha the modal body content is scrollable.	false

`<ModalFooter>`

Prop	Type	Description	Default
`children`	React.ReactNode	The content to display inside the modal footer	N/A

Example

import React from 'react';
import Modal, { ModalHeader, ModalBody, ModalFooter } from '@lightspeed/cirrus-modal';
import Button from '@lightspeed/cirrus-button';

class MyModal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
    };

    this.closeModal = this.closeModal.bind(this);
  }

  closeModal() {
    this.setState({ isOpen: false });
  }

  render() {
    return (
      <div>
        <Modal
          isOpen={this.state.isOpen}
          onRequestClose={this.closeModal}
        >
          <ModalHeader onCloseClicked={this.closeModal}>My Modal</ModalHeader>

          <ModalBody>This is my modal. There are many modals like it but this one is mine.</ModalBody>

          <ModalFooter>
            <Button primary onClick={doSomething}>
              Fly, little Modal, FLY!
            </Button>
          </ModalFooter>
        </Modal>
      </div>;
    );
  }
}

export default MyModal;