Nacho Printing Machine


    8.7.1 • Public • Published


    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{ 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{ 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({ 
        willShow: () => console.log('will show'),
        willHide: () => console.log('will hide')
      return (
          {show && 

    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({ 
        willShow: () => console.log('willlll show'),
        willLeave: () => console.log('willlll leave'),
      const handleOnLeft = () => {
      return (
            {show && 

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


    npm i @xtreamr/spark-modal

    DownloadsWeekly Downloads






    Unpacked Size

    51.1 kB

    Total Files


    Last publish


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