Only apply isLeaving to children that are React components.

Author: marnusw

CHANGELOG.md

@@ -1,6 +1,7 @@
 ### v2.0.0 (11 September 2016)
 
 * [ENHANCEMENT] Add support for IE<=11 (thanks @le0nik) (#22, #23)
+* [ENHANCEMENT] Provide an `isLeaving` prop on the current child component while it is leaving. (thanks @le0nik)
 * [ENHANCEMENT] Add ability to provide custom `height` className (useful for `css-modules`) (thanks @le0nik) (#20, #21)
 * [BUGFIX] Fix multiple remounts of children (thanks @le0nik) (#24)
 * [BUGFIX] Allow the child, that is leaving, to be `null` (thanks @le0nik)

demo/components/ContentLong.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 
-function ContentLong(props) {
+function ContentLong({className}) {
   return (
-    <div {...props}>
+    <div className={className}>
       <b>Some longer content</b>
       <p>
         Suspendisse non ante dui. Phasellus tempor sem non cursus feugiat. Pellentesque quis justo neque. Proin est

demo/components/ContentShort.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 
-function ContentShort(props) {
+function ContentShort({className}) {
   return (
-    <div {...props}>
+    <div className={className}>
       <b>Some shorter content</b>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar pharetra magna ac rhoncus. Pellentesque

demo/components/Demo.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Navbar, Nav, NavItem, Grid } from 'react-bootstrap';
+const NavbarBrand = Navbar.Brand;
 
 import PageHead from './PageHead.jsx';
 import ContentSwapper from './ContentSwapper.jsx';
@@ -28,7 +29,7 @@ class Demo extends React.Component {
     return (
       <div>
         <Navbar>
-          <Navbar.Brand>ReactCSSTransitionReplace</Navbar.Brand>
+          <NavbarBrand>ReactCSSTransitionReplace</NavbarBrand>
           <Nav right>
             <NavItem href="https://github.com/marnusw/react-css-transition-replace" target="_blank">GitHub</NavItem>
           </Nav>

src/ReactCSSTransitionReplace.jsx

@@ -30,7 +30,7 @@ function createTransitionTimeoutPropValidator(transitionType) {
 
         // If the duration isn't a number
       }
-      else if (typeof props[timeoutPropName] !== 'number') {
+      else if (typeof props[timeoutPropName] != 'number') {
         return new Error(timeoutPropName + ' must be a number (in milliseconds)');
       }
     }
@@ -219,7 +219,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
   _wrapChild(child, moreProps) {
     let transitionName = this.props.transitionName;
 
-    if (typeof transitionName === 'object' && transitionName !== null) {
+    if (typeof transitionName == 'object' && transitionName !== null) {
       transitionName = { ...transitionName };
       delete transitionName.height;
     }
@@ -253,16 +253,16 @@ export default class ReactCSSTransitionReplace extends React.Component {
         React.createElement(
           'span',
           { key: currentChildKey },
-          this._wrapChild(React.cloneElement(currentChild, { isLeaving }), {
-            ref: 'curr'
-          })
+          this._wrapChild(
+            typeof currentChild.type == 'string' ? currentChild : React.cloneElement(currentChild, { isLeaving }),
+            {ref: 'curr'})
         )
       );
     }
 
 
     if (height !== null) {
-      const heightClassName = (typeof transitionName === 'object' && transitionName !== null) ?
+      const heightClassName = (typeof transitionName == 'object' && transitionName !== null) ?
         transitionName.height || '' :
         `${transitionName}-height`;