Modal

Modal from Reakit with a really nice theme 👀

Install and import

yarn add @welcome-ui/modal @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components

import { Modal } from '@welcome-ui/modal'

Example

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

Open modal
Show editor

Sizes

By default size is set to lg. If you don't want a size (fit on content), set size to auto.

sm
md
lg
auto
Show editor

Header and Footer

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

Open modal
Show editor

Cover

Use Modal.Cover to style your Modal.

Open modal
Show editor

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

Dependencies

• - @welcome-ui/box
  ^2.0.2
• - @welcome-ui/clear-button
  ^2.0.2
• - @welcome-ui/shape
  ^2.0.2
• - @welcome-ui/text
  ^2.0.2
• - @welcome-ui/utils
  ^2.0.2
• - reakit
  ^1.1.1

Peer dependencies

• - @xstyled/styled-components
  ^1.17.0
• - @xstyled/system
  ^1.17.0
• - prop-types
  ^15.7.2
• - react
  ^16.10.2
• - react-dom
  ^16.10.2
• - styled-components
  ^4.0.0 || ^5.0.0