Modal
Allows user to show a component ahead the page, to take an action from it.
version
5.0.0-alpha.33
install
yarn add @welcome-ui/modal
usage
import { Modal } from '@welcome-ui/modal'
About #
Modal from Reakit with a really nice theme 👀
Usage #
Use useModalState, Modal, Modal.Trigger and Modal.Body to create a simple Modal. To ensure good spacing between modal's sub-components, they must be wrapped with Modal.Content.
Sizes #
By default size is set to lg. If you don't want a size (fit on content), set size to auto.
Header and Footer #
Use Modal.Header and Modal.Footer to style your Modal.
useModalState #
We use useDialogState from Reakit Dialog for the state of the modal.
Pass options to useModalState :
visible: e.g.const modal = useModalState({ visible: true })onClose: e.g.const modal = useModalState({ onClose: () => console.log('closing the modal') })
And the hook returns (among other things):
visible: whether the modal is currently visiblehide: a function to hide the modal
Properties #
Modal.Header #
| Name | Type(s) | Default | Required |
|---|---|---|---|
| title | string Element | ||
| subtitle | string Element | ||
| icon | ReactElement<any, string | JSXElementConstructor<any>> |
Modal.Footer #
| Name | Type(s) | Default | Required |
|---|---|---|---|
| information | { title: string; subtitle: string; } |