Function FadeIn

apps/web/ui/FadeIn/index.tsx:42–75

({
  direction = 'up',
  delay = 0,
  once = true,
  children,
}: {
  direction?: FadeDirection;
  delay?: FadeDelay;
  once?: boolean;
  children: JSX.Element;
})

};

const FadeIn = ({
  direction = 'up',
  delay = 0,
  once = true,
  children,
}: {
  direction?: FadeDirection;
  delay?: FadeDelay;
  once?: boolean;
  children: JSX.Element;
}) => {
  const [hidden, visible] = getClassNamesByDirection(direction);
  const delayClassName = getClassNameByDelay(delay);

  return (
    <InView triggerOnce={once}>
      {({ inView, ref, entry }) => {
        return (
          <div
            ref={ref}
            className={classNames(delayClassName, styles.transform, {
              [styles.opacity100]: inView,
              [visible]: inView,
              [styles.opacity0]: !inView,
              [hidden]: !inView,
            })}
          >
            {children}
          </div>
        );
      }}
    </InView>
  );
};

export default FadeIn;