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;

CSS Component

Not available.