Na}{

File Content: `FadeIn.tsx`

import React, { CSSProperties } from 'react';
import Transition, { ExitHandler } from 'react-transition-group/Transition';

interface Props {
  duration: number;
  children: JSX.Element;
  in: boolean;
  unmountOnExit?: boolean;
  onExited?: ExitHandler<HTMLDivElement>;
}

export const FadeIn = (props: Props) => {
  const defaultStyle: CSSProperties = {
    transition: `opacity ${props.duration}ms linear`,
    opacity: 0,
  };

  const transitionStyles: { [str: string]: CSSProperties } = {
    exited: { opacity: 0, display: 'none' },
    entering: { opacity: 0 },
    entered: { opacity: 1 },
    exiting: { opacity: 0 },
  };

  return (
    <Transition
      in={props.in}
      timeout={props.duration}
      unmountOnExit={props.unmountOnExit || false}
      onExited={props.onExited}
    >
      {(state) => (
        <div
          style={{
            ...defaultStyle,
            ...transitionStyles[state],
          }}
        >
          {props.children}
        </div>
      )}
    </Transition>
  );
};

Name	Size	Permission	Action
FadeIn.tsx	1022 bytes	0644
SlideDown.tsx	1382 bytes	0644

File Content: FadeIn.tsx

File Content: `FadeIn.tsx`