@hixme/modal

Mr. Modal

Implementation of a global modal component with the react-modal package for use within the Hixme ecosystem.

Usage

import { MrModal } from '@hixme/modal'

<MrModal 
  dialog 
  medium
  title='All your base are belong to us' 
  confirmLabel='Get down!' 
  cancelLabel='Eh, maybe not...'
>
  {/* Modal content here */}
</MrModal>

After creating your modals, you will need to pass them to your <MrModalManager /> component, located at your project's root.

import { MrModalManager } from '@hixme/modal'

// In project root
import TestModal from '/modal/path/here'

<MrModalManager 
  appElementId='app-element-node'
  modals={{
    TEST: TestModal,
  }}
/>

Important: In the modals object, the key is your modal string constant and the value is your modal component itself.

Additionally, you can supply the MrModalManager with your own appElement ID. This is the ID which needs to be assigned to the element wrapping the rest of your application.

---

To open the modal, you'll need to dispatch the setView action, passing in the string constant you've defined for your modal.

dispatch(setView(YOUR_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
  },
}