AnimatableHOC.js

import React from 'react';
import { TweenOneGroup } from 'rc-tween-one';

const defaults = {
  durations: {
    in: 300,
    out: 300,
    width: 300,
  },
  easings: {
    in: 'easeOutQuart',
    out: 'easeOutQuart',
  },
};

const animations = {
  in: {
    fade: [
      { opacity: 0, duration: 0 },
      { opacity: 1, duration: defaults.durations.in, ease: defaults.easings.in },
    ],
  },
  out: {
    fade:[
      { opacity: 0, duration: defaults.durations.out, ease: defaults.easings.out },
      { width: 0, duration: defaults.durations.width, ease: defaults.easings.in },
    ],
  },
};

const Animatable = ({
  children,
  inAnim = 'fade',
  outAnim = 'fade',
  ...rest
}) => {
  const animationProps = {
    enter: animations.in[inAnim],
    leave: animations.out[outAnim],
  };
  return (
    <TweenOneGroup
      appear={false}
      {...animationProps}
      {...rest}
    >
      {children}
    </TweenOneGroup>
  );
};

export default Animatable;