[dynamic react element] #react #typescript

FadeIn.tsx

import * as React from 'react';
import * as classNames from 'classnames';

export interface FadeInProps {
  when: boolean;
  delay?: number;
  duration?: number;
  distance?: string;
  order?: number;
  className?: string;
  wrapperElement?: keyof React.ReactHTML;
}

export const FadeIn: React.StatelessComponent<FadeInProps> = ({
  when,
  delay = 0,
  duration = 1200,
  distance = '100px',
  order,
  children,
  className,
  wrapperElement = 'div',
}) => {
  const Wrapper = wrapperElement;

  return (
    <Wrapper
      style={{
        transform: when ? `translateY(0)` : `translateY(${distance})`,
        opacity: when ? 1 : 0,
        transitionDelay:
          typeof order !== 'undefined'
            ? `${CASCADE_DELAY * order}ms`
            : `${delay}ms`,
        transitionDuration: `${duration}ms`,
      }}
      className={classNames(className)}
    >
      {children}
    </Wrapper>
  );
};

export const CASCADE_DELAY = 400;