spark-modal

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][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 (

{show &&


{children}


}

)
}
`

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(

{show &&
onLeft={handleOnLeft}
runLeave={leave}
>

{children}


}
,
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 =

console.log('showww)} />
``

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo