WUI logo

Modal

Allows user to show a component ahead the page, to take an action from it.

version

5.11.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.

Use Modal.Header and Modal.Footer to style your Modal.

onClose #

On Modal 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.

AssetModal #

For our cases we need to show an item in a center of a modal, with specific Backdrop background color and a close button. It's a new sub component to the modal: AssetModal.

Image #
Iframe #
With title and subtitle block #

Another variant with the AssetModal.AssetWithTitle component.

With a swiper #

Example with our <Swiper /> component.

Another example with AssetModal.AssetWithTitle.

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 open
  • hide: a function to hide the modal

Properties #

Modal.Header #
NameType(s)DefaultRequired
title
string
Element
subtitle
string
Element
icon
ReactElement<any, string | JSXElementConstructor<any>>
NameType(s)DefaultRequired
information
{ title: string; subtitle: string; }

Packages #

Dependencies #
Peer dependencies #

Previous

Drawer