@hixme/modal

    3.3.2 • Public • Published

    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

    Install

    npm i @hixme/modal

    DownloadsWeekly Downloads

    0

    Version

    3.3.2

    License

    MIT

    Unpacked Size

    34 kB

    Total Files

    15

    Last publish

    Collaborators

    • sureco-engineering
    • sureco-devops
    • billyxs
    • dreamingbinary
    • cbumstead
    • nachi-sureco
    • hixmeadmin
    • malikme3
    • guylhermetabosasureco
    • fparra-sc