@hixme/modal

Mr. Modal

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

Usage

The implementation is a bit different compared to the current modal:

import { MrModal } from '@hixme/modal'

<MrModal>
  { Your modal content }
</MrModal>

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

// 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))

Styling

Currently, the default style is a full screen modal. This can be overwritten by providing the <MrModal /> component with a style object.

style: {
  content: {
    ...contentStyles
  },
  overlay: {
    ...overlayStyles
  },
}