npm package: @paprika/modal
Description: The Modal component provides additional information without losing context of the main interface.
Author: @paprika
Latest version: 1.0.34

<!-- start: Autogenerated - do not modify -->

# @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                  |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Components

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

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

## Basic example

```jsx
<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

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/messaging-modal--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Modal/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/modal%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Modal/CHANGELOG.md)