@lightspeed/cirrus-modal

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.