Modal
npm i --save @hixme-ui/modal
Usage
import Modal from '@hixme-ui/modal'
<Modal
dialog
medium
title='All your base are belong to us'
confirmLabel='Get down!'
cancelLabel='Eh, maybe not...'
>
{/* Modal content here */}
</Modal>
Props
Property | Type | Value | Required | Description |
---|---|---|---|---|
backgroundColor | string |
N/A | Yes | Easy way to change the modal color |
hideCloseButton | boolean |
false | Yes | Hide the default close button |
style | object |
N/A | No | Override modal styles |
title | string |
N/A | No | Modal title header |
zIndex | number |
1001 | No | Modal z-index value |
small | boolean |
false | No | Modal with 568px max-width |
medium | boolean |
false | No | Modal with 800px max-width |
large | boolean |
false | No | Modal with 1024px max-width |
middle | boolean |
false | No | Vertically align content in the center of the modal |
bottom | boolean |
false | No | Vertically align content on the bottom of the modal |
contentCenter | boolean |
false | No | Horizontally align content center |
contentEnd | boolean |
false | No | Horizontally align content right |
contentPadding | string |
null | No | Padding for the modal content |
cancelProcessing | boolean |
false | No | Show processing state on cancel button |
cancelSubmittingText | string |
N/A | No | Text shown on the cancel button when cancelProcessing is true
|
cancelHandler | function |
defaultClose() |
No | When dialog = true , function called on cancel |
cancelLabel | string |
'Cancel' | No | When dialog = true , label on the cancel button |
confirmProcessing | boolean |
false | No | Show processing state on confirm button |
confirmSubmittingText | string |
N/A | No | Text shown on the confirm button when confirmProcessing is true
|
confirmHandler | function |
N/A | No | When dialog = true , function called on confirm |
confirmLabel | string |
'Ok' | No | When dialog = true , label on the confirm button |
dialog | boolean |
false | No | Show dialog modal |
errorDialog | boolean |
false | No | Show error dialog modal |
Styling
The default style is a full screen modal. You can specify small
, medium
, or large
to render a more traditional modal style. Any of the preset modal styles can be overwritten by providing the <MrModal />
component with a style object.
style: {
content: {
...contentStyles
},
overlay: {
...overlayStyles
},
}