A generic way to apply enter transitions to a component.

withEnterTransition.js

import React, { Component } from 'react'
import type { ComponentType } from 'react'
import { omit, prop } from 'ramda'
import posed from 'react-pose'

/**
 * @const poseProps
 * @description Represents a fade up transition
 * @type {{hidden: {y: number, opacity: number}, visible: {y: number, opacity: number}}}
 */
const poseProps = {
  hidden: {
    y: 10,
    opacity: 0
  },
  visible: {
    y: 0,
    opacity: 1
  }
}

/**
 * @const PosedContainer
 * @description Animated wrapper component
 */
const PosedContainer = posed.div(poseProps)

/**
 * @type BaseState
 */
type BaseState = {
  poseState: string,
}

/**
 * @const withEnterTransition
 * @param BaseComponent
 */
const withEnterTransition = (BaseComponent: ComponentType<any>) =>
  class Wrapper extends Component<any, BaseState> {
    constructor (props: any) {
      super(props)

      this.state = {
        poseState: 'hidden'
      }
    }

    /**
     * @method componentDidMount
     * @description Triggers the transition
     */
    componentDidMount () {
      const timeout = prop('delay', this.props)
      setTimeout(() => {
        this.setState({ poseState: 'visible' })
      }, timeout || 500)
    }

    render () {
      const { poseState } = this.state
      const baseProps = omit(['delay'], this.props)
      return (
        <PosedContainer pose={poseState}>
          <BaseComponent {...baseProps} />
        </PosedContainer>
      )
    }
  }

export default withEnterTransition