Nacho Printing Machine

    @xtreamr/spark-modal

    8.7.1 • Public • Published

    spark-modal

    Travis npm package Coveralls

    Describe spark-modal here.

    Two main export:

    1- ModalService: It is used to add, show, hide and remove modals. Diferents steps to use:

    • First is to unse ModalService.add({ name: 'modalName', leaveAnimation: 'true|false' }). It register the modal into the service.
    • After add, you can use ModalService.show({ name: 'modalName' }). It's, emit an event 'show-modal'.
    • Using ModalService.on({ event: 'show-modal', callback: func }) you will be react, maybe rendering the modal.
    • If you use ModalService.hide() you will be able to listen one of this methods: ** Using ModalService.on({ event: 'leave-modal', callback: func }) if the modal was added with existAnimation. If you use this method remember to call ModalService.left() after unmount your modal from the UI. ** Using ModalService.on({ event: 'hide-modal', callback: func }) if the modal was added without existAnimation.
    • When you don't need any more a modal remember to remove it from with ModalService.remove({ name: modalName })
    • Same with events listeners using ModalService.off({ event: 'show-modal | hide-modal | leave-modal', callback: func })

    2- Hooks to integrate with react: 2.1 - [{ show }] = useShowHideModal({ name: string, willShow: func, willHide: func }) Use this hook into any modal component to add the modal to service and it will response with a variable to show and hide the modal. Also, pass a function callback into willShow and willHide to perform any arbitrary process when the modal will show or hide. Example:

    export const ModalHookedNoAnim = ({ children, name }) => {
      const [{ show }] = useShowHideModal({ 
        name,
        willShow: () => console.log('will show'),
        willHide: () => console.log('will hide')
      })
    
      return (
        <Fragment>
          {show && 
            <ModalOverlay>
              <ModalBox>
                {children}
              </ModalBox>
            </ModalOverlay>
        } 
        </Fragment>
      )
    }
    

    2.1 - [{ show, leave }, setHideModal] = useShowLeaveModal({ name: string, willShow: func, willLeave: func }) The difference between this hook and useShowHideModal is that it isn't unselected into ModalService until call setHideModal function. So, when you detect that the variable: leave returned by the hook is true is the moment to perform an animation and when this animation ends call setHideModal() to unselect the modal into ModalService. Also, pass a function callback to willShow and willLeave to perform any arbitrary process when the modal will show or leave.

    export const ModalHooked = ({ children, name }) => {
      const [{ show, leave }, setHideModal] = useShowLeaveModal({ 
        name, 
        willShow: () => console.log('willlll show'),
        willLeave: () => console.log('willlll leave'),
      })
    
      const handleOnLeft = () => {
        setHideModal()
      }
    
      return (
        ReactDOM.createPortal(
          <Fragment>
            {show && 
              <ModalOverlay
                onLeft={handleOnLeft}
                runLeave={leave}
              >
                <ModalBox>
                  {children}
                </ModalBox>
              </ModalOverlay>
          } 
          </Fragment>,
          document.body
        )
      )
    }
    

    3- withModalPortal It is a react HOC that:

    • Add to ModalService the Modal calling ModalService.add(...). You sould pass as prop: name and leaveAnimation
    • Also, this HOC pass down to the Component the leave prop. Only with leaveAnimation="true" modals. Use it to perform an animation befor unmount modal. A good point to use it is in componentDidUpdate
    componentDidUpdate(prevProps) {
      // if prop leave has just set and it has just changed
      if (this.props.leave && this.props.leave !== prevProps.leave) {
        // exec leave animation
      }
    }
    
    • When the animation ends (with modals with leaveAnimation="true") use a method hideMe passed in props from HOC to remove from the DOM the modal. If your modal is leaveAnimation="false" this method is called into HOC, you don't need to use it.
    • When the modal is umounted this HOC will remove the events listeners and the modal from the service.
    • Show demo/src/Modal to view how is implemented

    4- Some props as functions callbacks to interact after an before modal enter, hide or leave. They are injected with: withModalPortal HOC, and you can use them as regular prop:

    willShow={() => {}}
    willLeave={() => {}}
    willHide={() => {}}
    didShow={() => {}}
    didLeave={() => {}}
    didHide={() => {}}
    didShow={() => {}}
    
    const Modal = <div>I am a modal</div>
    const ModalPortal = withModalPortal(Modal)
    
    <ModalPortal willShow={() => console.log('showww)} />
    

    Install

    npm i @xtreamr/spark-modal

    DownloadsWeekly Downloads

    8

    Version

    8.7.1

    License

    MIT

    Unpacked Size

    51.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • ralliv
    • joelgarcia
    • santimg
    • arnaumarch
    • mancas
    • pacorampas
    • sergio-deka
    • xtreamr-ci
    • nandawtek
    • pblanco-dekalabs
    • mirframai
    • frsela
    • smgaragorri
    • guillaumeparis2000
    • mardito