Modal
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 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^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