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.
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 visiblehide: a function to hide the modal
Properties #
| Name | Type(s) | Default | Required |
|---|---|---|---|
| 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 #
- - @welcome-ui/box^3.0.0
- - @welcome-ui/close-button^3.12.0
- - @welcome-ui/shape^3.4.3
- - @welcome-ui/text^3.1.1
- - @welcome-ui/utils^3.4.3
- - reakit^1.3.6
Peer dependencies #
- - @xstyled/styled-components^2.2.3
- - @xstyled/system^2.2.3
- - prop-types^15.7.2
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.2.1