@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