Modal

npm i --save @hixme-ui/modal

View it live

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
  },
}