react-mortal

react-portal is awesome, but it may
be tricky to animate a Portal when entering/leaving the dom. This is what
react-mortal is solving, by combining it with the power of react-motion.

Check usage example and demo.

Installation

``
npm i react-mortal
`

Usage

`javascript
isOpened={true|false}
onClose={handler}
motionStyle={(spring, isVisible) => ({
...motion object to pass
})}
>
{(motion, isVisible) => (


isOpened {Boolean} : Show/hide Portal instance, applying animation

onClose {Function} : Callback called when ESC key is pressed

motionStyle {Function} : Function that returns an object consumed by react-motion. See react-motion docs.

portalProps {Object} : Those props will be passed to the react-portal

onHide {Function} : Callback called when close animation has been finished

Full example

Example, to create a open/close animated modal:

`javascript
import React, { Component, PropTypes } from 'react'
import Mortal from 'react-mortal'

class AnimatedModal extends Component {
static propTypes = {
isOpened: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
}

render() {
const { isOpened, onClose } = this.props

return (
isOpened={isOpened}
onClose={onClose}
motionStyle={(spring, isVisible) => ({
opacity: spring(isVisible ? 1 : 0),
})}
>
{(motion, isVisible, isAnimated) => (
style={{
opacity: motion.opacity,
}}
>


{'modal body'}