@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