Modal

Modal from Reakit with a really nice theme 👀

Install and import #

Usage #

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.

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

Replace the default close button

Close
hide
func

hide from Reakit Dialog

hideOnClickOutside
bool

hideOnClickOutside from Reakit Dialog, if true add a cursor pointer on the backdrpp

true
onClose
func

call an function when modal closed

size
sm
md
lg
auto

auto adapt on the width of child element

lg

Dependencies #

Peer dependencies #