🚀 Adds onMount & onWillUnmount props. ✏️ Adds missing props to do…

…cumentation. (#16)
tannerlinsley · Nov 1, 2019 · d0c618d · d0c618d
1 parent 538eae5
commit d0c618d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -260,19 +260,23 @@ easings ===
 
 ###### Props
 
-| Prop                 | Required | Default Value  | Description                                                          |
-| :------------------- | :------- | :------------- | :------------------------------------------------------------------- |
-| `show`               | `true`   | `false`        | Determines whether to "show" the content or not.                     |
-| `duration`           |          | `300`          | The `transition-duration` of the transition used to show the content |
-| `easing`             |          | `easeOutQuint` | The `transition-timing-function` used to show the content            |
-| `transitionProperty` |          | `all`          | The `transition-property` used to show the content                   |
-| `preMount`           |          | `false`        | If `true`, element will mount on first render if `show === false`    |
-| `stayMounted`        |          | `false`        | If `true`, element will stay mounted when `show === false`           |
-| `transitionOnMount`  |          | `false`        | If `true`, element will animate from the `start` style on mount      |
-| `style`              |          | `undefined`    | React style object (See [lifecycle](#lifecycle) for more details)    |
-| `start`              |          | `undefined`    | React style object (See [lifecycle](#lifecycle) for more details)    |
-| `enter`              |          | `undefined`    | React style object (See [lifecycle](#lifecycle) for more details)    |
-| `leave`              |          | `undefined`    | React style object (See [lifecycle](#lifecycle) for more details)    |
+| Prop                 | Required | Default Value  | Description                                                                |
+| :------------------- | :------- | :------------- | :------------------------------------------------------------------------- |
+| `show`               | `true`   | `false`        | Determines whether to "show" the content or not.                           |
+| `duration`           |          | `300`          | The `transition-duration` of the transition used to show the content       |
+| `easing`             |          | `easeOutQuint` | The `transition-timing-function` used to show the content                  |
+| `transitionProperty` |          | `all`          | The `transition-property` used to show the content                         |
+| `preMount`           |          | `false`        | If `true`, element will mount on first render if `show === false`          |
+| `stayMounted`        |          | `false`        | If `true`, element will stay mounted when `show === false`                 |
+| `transitionOnMount`  |          | `false`        | If `true`, element will animate from the `start` style on mount            |
+| `style`              |          | `undefined`    | React style object (See [lifecycle](#lifecycle) for more details)          |
+| `start`              |          | `undefined`    | React style object (See [lifecycle](#lifecycle) for more details)          |
+| `enter`              |          | `undefined`    | React style object (See [lifecycle](#lifecycle) for more details)          |
+| `leave`              |          | `undefined`    | React style object (See [lifecycle](#lifecycle) for more details)          |
+| `component`          |          | `div`          | Use a <span> (or custom) component as the wrapper instead of a <div>       |
+| `onFinish`           |          | `noop`         | Function called when the component finishes transitioning.                 |
+| `onMount`            |          | `noop`         | Function called when the children passed to Animate are mounted.           |
+| `onWillUnmount`      |          | `noop`         | Function called right before the children passed to Animate are unmounted. |
 
 ## Contributing
 

diff --git a/src/index.js b/src/index.js
@@ -60,6 +60,8 @@ export class Animate extends React.Component {
     enter: PropTypes.object,
     leave: PropTypes.object,
     onFinish: PropTypes.func,
+    onMount: PropTypes.func,
+    onWillUnmount: PropTypes.func,
     transitionOnMount: PropTypes.bool,
     children: PropTypes.node.isRequired,
   }
@@ -78,6 +80,8 @@ export class Animate extends React.Component {
     enter: undefined,
     leave: undefined,
     onFinish: () => {},
+    onMount: () => {},
+    onWillUnmount: () => {},
   }
 
   constructor (props) {
@@ -338,6 +342,8 @@ export class Animate extends React.Component {
       enter,
       innerRef,
       onFinish,
+      onMount,
+      onWillUnmount,
       preMount,
       ...rest
     } = this.props
@@ -354,12 +360,26 @@ export class Animate extends React.Component {
         style={this.makeStyles(currentStyle, styleOverrides)}
         {...rest}
       >
-        {children}
+        <MountNotifier onMount={onMount} onWillUnmount={onWillUnmount}>
+          {children}
+        </MountNotifier>
       </Comp>
     ) : null
   }
 }
 
+class MountNotifier extends React.Component {
+  componentDidMount = () => {
+    this.props.onMount()
+  }
+  componentWillUnmount = () => {
+    this.props.onWillUnmount()
+  }
+  render () {
+    return this.props.children
+  }
+}
+
 // I'll let someone smarter than me figure out how to do this ;)
 
 // export class AnimateGroup extends React.Component {