WUI logo

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.

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 visible
  • 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