Calcite React

Edit page

Modals are meant to "take over" the screen and focus users attention on a dialog which presents the user with an opportunity to add, modify or create content. A Modal should always be centered both vertically and horizontally within the browser window. When a Modal is opened, the interface darkens and disables all other user interface elements in order to force a user to take an action required by their workflow. Two Modals can't be open at once.

Note: A Modal requires the appElement prop to be aria-compliant. Details on how to set this property can be found at http://reactcommunity.org/react-modal/accessibility/

Import Syntax

xxxxxxxxxx
 
import Modal from 'calcite-react/Modal'

Example: Create a DOM element dynamically and pass it via `appElement` prop to `Modal`

xxxxxxxxxx
 
/* ModalExample.js */
import React from 'react';
import Modal from 'calcite-react';
​
export class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }
​
  render() {
    return <Modal appElement={this.el} />;
  }
}

Example: Pass an existing DOM element via `appElement` prop to `Modal`

xxxxxxxxxx
 
/* index.html */
<body>
  <div id="root" />
  <div id="modal" />
</body>

xxxxxxxxxx
 
/* ModalExample.js */
import React from 'react';
import Modal from 'calcite-react';
​
export class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.getElementById('modal');
  }
  render() {
    return <Modal appElement={this.el} />;
  }
}

Basic Usage

 
<GuideExample
  id="modalGuideExample"
  style={{ position: 'relative', height: '400px' }}
>
  <Modal
    open={true}
    parentSelector={() => document.getElementById('modalGuideExample')}
    overlayStyle={{ position: 'absolute' }}
    dialogStyle={{ width: '90%' }}
    appElement={document.body}
    title="A New Hope"
    actions={[
      <Button key="save">Save</Button>,
      <Button key="cancel" halo>
        Cancel
      </Button>,
    ]}
  >
    <CalciteP>
      It is a period of civil war. Rebel spaceships, striking from a hidden
      base, have won their first victory against the evil Galactic Empire.
    </CalciteP>
    <CalciteP>
      During the battle, Rebel spies managed to steal secret plans to the
      Empire’s ultimate weapon, the DEATH STAR, an armored space station with
      enough power to destroy an entire planet.
    </CalciteP>
    <CalciteP>
      Pursued by the Empire’s sinister agents, Princess Leia races home aboard
      her starship, custodian of the stolen plans that can save her people and
      restore freedom to the galaxy...
    </CalciteP>
  </Modal>
</GuideExample>

 
() => {
  class ModalStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        open: false,
      }
      this.openModal = this.openModal.bind(this)
      this.closeModal = this.closeModal.bind(this)
    }
​
    openModal() {
      this.setState({
        open: true,
      })
    }
​
    closeModal() {
      this.setState({
        open: false,
      })
    }
​
    render() {
      // For the purpose of this example, we need to set a custom z-index on
      // the modal so it doesn't interfere with the side panel
      const docsModalZIndex = { zIndex: 1001 }
​
      return (
        <div>
          <Button onClick={this.openModal}>Open Modal</Button>
          <Modal
            open={this.state.open}
            onRequestClose={this.closeModal}
            appElement={document.body}
            overlayStyle={docsModalZIndex}
            title="The Empire Strikes Back"
            actions={[
              <Button key="ok" onClick={this.closeModal}>
                Okay
              </Button>,
              <Button key="cancel" onClick={this.closeModal} halo>
                Cancel
              </Button>,
            ]}
            secondaryActions={
              <Button
                key="back"
                onClick={this.closeModal}
                clearGray
                icon={<ChevronLeftIcon />}
                iconPosition="before"
              >
                Back
              </Button>
            }
          >
            <CalciteP>
              It is a dark time for the Rebellion. Although the Death Star has
              been destroyed, Imperial troops have driven the Rebel forces
              from their hidden base and pursued them across the galaxy.{' '}
            </CalciteP>
            <CalciteP>
              Evading the dreaded Imperial Starfleet, a group of freedom
              fighters led by Luke Skywalker has established a new secret base
              on the remote ice world of Hoth.
            </CalciteP>
            <CalciteP>
              The evil lord Darth Vader, obsessed with finding young
              Skywalker, has dispatched thousands of remote probes into the
              far reaches of space...
            </CalciteP>
          </Modal>
        </div>
      )
    }
  }
​
  return <ModalStory />
}

No Header or Footer

 
<GuideExample
  id="contentModalGuideExample"
  style={{ position: 'relative', height: '400px' }}
>
  <Modal
    open={true}
    parentSelector={() => document.getElementById('contentModalGuideExample')}
    overlayStyle={{ position: 'absolute' }}
    dialogStyle={{ width: '90%' }}
    appElement={document.body}
  >
    <CalciteH3>Return of the Jedi</CalciteH3>
    <CalciteP>
      Luke Skywalker has returned to his home planet of Tatooine in an attempt
      to rescue his friend Han Solo from the clutches of the vile gangster
      Jabba the Hutt.
    </CalciteP>
    <CalciteP>
      Little does Luke know that the GALACTIC EMPIRE has secretly begun
      construction on a new armored space station even more powerful than the
      first dreaded Death Star.
    </CalciteP>
    <CalciteP>
      When completed, this ultimate weapon will spell certain doom for the
      small band of rebels struggling to restore freedom to the galaxy...
    </CalciteP>
  </Modal>
</GuideExample>

Props

Modal `default`

Property	Type	Required	Default	Description
onAfterOpen	Func	false	() => {}	Function that will be run after the Modal has opened.
onRequestClose	Func	false	() => {}	Function that will be run when the Modal is requested to be closed (either by clicking on overlay or pressing ESC).
shouldCloseOnOverlayClick	Bool	false	true	Boolean indicating if clicking the overlay should call the onRequestClose prop.
shouldCloseOnEsc	Bool	false	true	Boolean indicating if pressing the esc key should call the onRequestClose prop.
showClose	Bool	false	true	Toggles visiblity of the close icon button.
children	Node	false	-	The content of the component.
open	Bool	false	-	Boolean describing if the Modal should be shown or not.
title	Node	false	-	Node to be rendered as the modal title in the header
contentLabel	String	false	-	String indicating how the content container should be announced to screenreaders.
actions	Node	false	-	Buttons or links to be placed in the Modal actions footer.
secondaryActions	Node	false	-	Buttons or links to be placed in the footer, opposite your primary actions.
color	Enum	false	-	Adds a colored bar to the top of the Modal
noPadding	Bool	false	-	Remove pading from content wrapper.
parentSelector	Func	false	-	Function that will be called to get the parent element to which the Modal will be attached.
overlayStyle	Object	false	-	Styles applied to the overlay div.
dialogStyle	Object	false	-	Styles applied to the container dialog div.
headerStyles	Object	false	-	Styles applied to the header div.
titleStyles	Object	false	-	Styles applied to the title div.
contentStyles	Object	false	-	Styles applied to the content div.
actionStyles	Object	false	-	Styles applied to the footer actions div.
secondaryActionStyles	Object	false	-	Styles applied to the footer secondary actions div.