ProjectCSSTransition using global hardwired _animations.scss defaults

ProjectCSSTransition.js

/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/3e1c33537c1f3613f04fea87dac16a36 */

import React from 'react';

import styles from 'styles-imports/shared.scss';

import { CSSTransition } from 'react-transition-group';

/**
 * ProjectCSSTransition
 * extends the functionality of react-transition-group's CSSTransition
 *  - it wires the global animationDurationMs from _animations.scss to the transition
 *  - it applies mountOnEnter, unMountOnExit per default
 *  - allows timeout to be numbers in ms (e.g. 100) or numbers as strings (e.g. '100')
 * @param {*} props
 */

const ProjectCSSTransition = (props) => {
  const { classNames, timeout } = props;

  return (
    <CSSTransition
      in={props.in}
      classNames={classNames}
      timeout={isNaN(timeout) ? Number(styles.animationDurationMs) : Number(timeout)}
      mountOnEnter
      unmountOnExit>
        {props.children}
    </CSSTransition>
  );
};

export default ProjectCSSTransition;