Modal
Allows user to show a component ahead the page, to take an action from it.
version
5.3.0
install
yarn add @welcome-ui/modal
usage
import { Modal, useModal } from '@welcome-ui/modal'
About #
Modal from Ariakit dialog with a really nice theme 👀
Usage #
Use useModal
, 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.
onClose #
On useModal
add onClose
to have custom function called on modal close.
Without close button #
On Modal.Content
you can force not showing the close button with withClosingButton
to false
.
useModal #
We use useDialogStore
from Ariakit Dialog for the state of the modal.
Pass options to useModal
:
defaultOpen
: e.g.const modal = useModal({ defaultOpen: true })
onClose
: e.g.const modal = useModal({ onClose: () => console.log('closing the modal') })
And the hook returns (among other things):
useState('open')
: whether the modal is currently openhide
: 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; } |