react-transition-preset/dist/Transition.js

Lightweight, zero-dependency transition component for React with common preset transition

import { useRef, isValidElement, cloneElement } from 'react';
import { getTransitionStyles } from './get-transition-styles/get-transition-styles.js';
import { GlobalConfig } from './global-config.js';
import { useInView } from './hooks/use-in-view.js';
import { useMemoizedFn } from './hooks/use-memoized-fn.js';
import { useTransition, TransitionStatus } from './use-transition.js';
import { jsx } from 'react/jsx-runtime';

// src/Transition.tsx
var Transition = ({
  mounted: _mounted,
  children,
  onExit,
  onEntered,
  onEnter,
  onExited,
  viewport,
  unsafe_alwaysMounted,
  ...rest
}) => {
  const {
    duration,
    enterDelay,
    exitDelay,
    exitDuration,
    initial,
    keepMounted,
    timingFunction,
    transition,
    reduceMotion
  } = GlobalConfig.merge(rest);
  const mountedInView = _mounted === "whileInView";
  const el = useRef(null);
  const isInView = useInView(el, viewport, {
    enable: mountedInView
  });
  const mounted = mountedInView ? isInView : _mounted;
  const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({
    mounted,
    initial,
    exitDuration,
    duration,
    timingFunction,
    onExit,
    onEntered,
    onEnter,
    onExited,
    enterDelay,
    exitDelay,
    reduceMotion
  });
  const createChildren = useMemoizedFn((style, { mounted: mounted2 }) => {
    let element;
    if (mounted2 || keepMounted) {
      if (typeof children === "function") {
        element = children(style);
      } else {
        if (isValidElement(children)) {
          element = cloneElement(children, { style });
        } else {
          element = children;
        }
      }
    } else {
      element = null;
    }
    if (!mountedInView) {
      return element;
    }
    const { placeholder, attributes } = viewport || {};
    const Placeholder = placeholder || "div";
    return /* @__PURE__ */ jsx(Placeholder, { ref: el, ...attributes, children: element });
  });
  const createTransitionChildren = useMemoizedFn(({ mounted: mounted2 }) => {
    return createChildren(
      getTransitionStyles({
        transition,
        duration: transitionDuration,
        state: transitionStatus,
        timingFunction: transitionTimingFunction
      }),
      { mounted: mounted2 }
    );
  });
  const isExited = transitionStatus === TransitionStatus.exited;
  if (isExited) {
    if (unsafe_alwaysMounted) {
      return createTransitionChildren({ mounted: false });
    }
    return createChildren({ display: "none" }, { mounted: false });
  }
  return createTransitionChildren({ mounted: true });
};

export { Transition };