fix: improve props

Author: fakundo

README.md

@@ -126,7 +126,7 @@ import { TransitionGroup } from 'react-transitioning'
 
 ```ts
 type TransitionProps = {
-  children: (transitionState: TransitionState, activePhase: TransitionPhase) => React.ReactNode;
+  children: React.ReactNode | ((transitionState: TransitionState, activePhase: TransitionPhase) => React.ReactNode);
   in?: boolean;
   appear?: boolean;
   enter?: boolean;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transitioning",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React components for easily implementing basic CSS animations and transitions",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

src/CSSTransition.tsx

@@ -1,4 +1,4 @@
-import { Children, cloneElement, useMemo } from 'react';
+import { cloneElement, isValidElement, useMemo } from 'react';
 import { Transition, TransitionPhase, TransitionProps } from './Transition';
 
 /**
@@ -67,18 +67,22 @@ type CSSTransitionChildProps = Pick<CSSTransitionProps, 'children' | 'classNames
   phase: TransitionPhase;
 };
 
-const CSSTransitionChild = (props: CSSTransitionChildProps) => {
+function CSSTransitionChild(props: CSSTransitionChildProps) {
   const { children, classNames, phase } = props;
-  const child = Children.only(children);
-  const { className: childClassName } = child.props;
+
+  if (!isValidElement(children)) {
+    return null;
+  }
+
+  const { className: childClassName } = children.props;
 
   const finalClassName = useMemo(
     () => joinClassNames(childClassName, makeClassName(phase, classNames)),
     [childClassName, classNames, phase],
   );
 
-  return cloneElement(child, { className: finalClassName });
-};
+  return cloneElement(children, { className: finalClassName });
+}
 
 /**
  * The `CSSTransition` component applies CSS transitions based on the phase of a transition lifecycle.

src/StyleTransition.tsx

@@ -1,4 +1,4 @@
-import { cloneElement, Children, useMemo } from 'react';
+import { cloneElement, useMemo, isValidElement } from 'react';
 import { TransitionPhase, TransitionProps, Transition } from './Transition';
 
 /**
@@ -43,18 +43,22 @@ type StyleTransitionChildProps = Pick<StyleTransitionProps, 'children' | 'styles
   phase: TransitionPhase;
 };
 
-const StyleTransitionChild = (props: StyleTransitionChildProps) => {
+function StyleTransitionChild(props: StyleTransitionChildProps) {
   const { children, styles, phase } = props;
-  const child = Children.only(children);
-  const { style: childStyle } = child.props;
+
+  if (!isValidElement(children)) {
+    return null;
+  }
+
+  const { style: childStyle } = children.props;
 
   const finalStyle = useMemo(
     () => ({ ...childStyle, ...makePhaseStyle(phase, styles) }),
     [childStyle, styles, phase],
   );
 
-  return cloneElement(child, { style: finalStyle });
-};
+  return cloneElement(children, { style: finalStyle });
+}
 
 /**
  * The `StyleTransition` component allows you to animate the styles of a component across different

src/Transition.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useIsoEffect } from './useIsoEffect';
 
 /**
@@ -101,7 +101,9 @@ export type TransitionProps = {
    * @param activePhase - The phase currently in progress (e.g., "appearActive", "enterDone").
    * @returns React nodes to render.
    */
-  children: (transitionState: TransitionState, activePhase: TransitionPhase) => React.ReactNode;
+  children:
+    | React.ReactNode
+    | ((transitionState: TransitionState, activePhase: TransitionPhase) => React.ReactNode);
 };
 
 const EVENT_MAP: {
@@ -136,7 +138,6 @@ export function Transition(props: TransitionProps) {
     addEndListener,
   } = props;
 
-  const tmRef = useRef<number>(0);
   let ignoreInPropChange = false;
 
   // Make phase state
@@ -157,19 +158,20 @@ export function Transition(props: TransitionProps) {
     const [eventName, nextPhase, delay] = EVENT_MAP[phase];
     const { [eventName]: event } = props;
     event?.();
+    let tm = 0;
     if (nextPhase) {
       if (delay) {
         if (addEndListener) {
           addEndListener(phase, () => setPhase(nextPhase));
         } else {
-          tmRef.current = setTimeout(setPhase, duration, nextPhase);
+          tm = setTimeout(setPhase, duration, nextPhase);
         }
       } else {
-        tmRef.current = setTimeout(setPhase, 0, nextPhase);
+        tm = setTimeout(setPhase, 0, nextPhase);
       }
     }
     return () => {
-      clearTimeout(tmRef.current);
+      clearTimeout(tm);
     };
   }, [phase, duration]);
 
@@ -195,10 +197,10 @@ export function Transition(props: TransitionProps) {
   );
 
   // Do not render anything
-  if (!alwaysMounted && phase === TransitionPhase.EXIT_DONE) {
+  if (!alwaysMounted && (exit ? phase === TransitionPhase.EXIT_DONE : !inProp)) {
     return null;
   }
 
   // Render children
-  return children(transitionState, phase);
+  return typeof children === 'function' ? children(transitionState, phase) : children;
 }