@hixme/modal
v2.8.1
Published
Hixme Modal
Downloads
52
Readme
Mr. Modal
Implementation of a global modal component with Redux and the @hixme-ui/modal package and -- by extension -- the react-modal package for use within the Hixme ecosystem. For more information on props for use with the MrModal
component, see the @hixme-ui/modal README
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 setModal action, passing in the string constant you've defined for your modal.
dispatch(setModal(YOUR_MODAL))
You can also pass some data to your modal as a second argument in the dispatch.
dispatch(setModal(YOUR_MODAL, { myData }))
myData
can then be accesed on the component props.
const MyModalComponent = ({
data: { myData }
}) => (
<MrModal>
...
</MrModal>
)
Redux Actions
| Name | Description | | ------------------ | -------------------------------------------------------------- | | setModal | Set current modal with modal constant name | | setData | Add argument to data object | | clearModal | Clear entire current modal store (including data and viewList) | | addViewToList | Add modal constant name to view list | | removeViewFromList | Remove modal constant name to view list |
Redux Selectors
| Name | Description | | ------------------ | -------------------------------------------- | | getModal | Returns the entire modal store | | getCurrentView | Returns only the current modal constant | | getViewList | Returns the current viewList key | | hasActiveModal | Returns if there is a currently active modal | | getModalData | Returns the current data object |