@paprika/modal

Description

The Modal component provides additional information without losing context of the main interface.

Installation

yarn add @paprika/modal

or with npm:

npm install @paprika/modal

Props

Modal

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |a11yText|string|false|null| | |children|node|true|-| The content for the Modal.| |isOpen|bool|true|-| Control the visibility of the modal| |onClose|func|false|() => {}| Callback triggered when the modal needs to be closed| |onAfterOpen|func|false|() => {}| Callback once the modal has been opened event| |onAfterClose|func|false|() => {}| Callback once the modal has been closed event| |size|[ Modal.types.size.SMALL, Modal.types.size.MEDIUM, Modal.types.size.LARGE]|false|Modal.types.size.MEDIUM| | |zIndex|number|false|zValue(6)| The z-index of the Takeover content|

Components

You can use any of the following components to compose the Modal:

<Modal.Header />
<Modal.Content />
<Modal.Footer />
<Modal.FocusLock />
<Modal.Overlay />

Basic example

<Modal isOpen={isOpen} onClose={toggle}>
  <Modal.Header>Header</Modal.Header>
  <Modal.Content>My content</Modal.Content>
  <Modal.Footer>
    <Button kind="primary">Primary</Button>
    <Button>Secondary</Button>
    <Button kind="minor" onClick={toggle}>
      Cancel
    </Button>
  </Modal.Footer>
</Modal>

Warnings

If the content you are putting into this component will try and control focus (like CKEditor), read this: https://github.com/acl-services/paprika/issues/453

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG