Modal

v2.0.2
duplicate

Modal from Reakit with a really nice theme 👀

Install and import

Example

Use useModalState, Modal, Modal.Trigger and <Modal.Content /> to create a simple Modal.

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.Title and Modal.Footer to style your Modal.

Cover

Use Modal.Cover 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 })

And the hook returns (among other things):

  • visible : whether the modal is currently visible
  • hide : a function to hide the modal

Properties

NameType(s)DefaultRequired
ariaLabel
string
children
node
closeElement
node

Close
hide
func

hideOnClickOutside
bool

true
onClose
func

size
sm
md
lg
auto

lg

Dependencies

Peer dependencies