@paprika/modal NPM | npm.io

1.0.31 • Published 2 years ago

Install

Weekly downloads

1

License

MIT

Repository

Last release

2 years ago

@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

@paprika/button @paprika/constants @paprika/heading @paprika/helpers @paprika/overlay @paprika/stylers @paprika/tokens prop-types react-focus-lock react-transition-group

@infinitebrahmanuniverse/nolb-_pap @everything-registry/sub-chunk-704

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago