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; } |