Merge pull request #31 from ModPhoenix/add-otherProps

Adds ability to set any props

.travis.yml

@@ -4,6 +4,4 @@ cache:
     - node_modules
     - test/node_modules
 node_js:
-  - '8'
-before_script:
-  - cd test && npm i
+  - '10'

example/index.tsx

@@ -38,12 +38,19 @@ interface Props {
   score: number,
 }
 
+function handleClick(): void {
+  console.log('click!');
+}
+
 const AppComponent = ({ diff, score }: Props) =>
   <div className='App'>
     <AnimateOnChange
       baseClassName='Score'
       animationClassName='Score--bounce'
-      animate={diff !== 0}>
+      animate={diff !== 0}
+      id="example-id"
+      onClick={handleClick}
+    >
         Score: {score}
     </AnimateOnChange>
   </div>

index.tsx

@@ -40,7 +40,7 @@ interface AnimateOnChange {
  * @prop {string} animationClassName - Class added when `animate == true`.
  * @prop {bool} animate - Wheter to animate component.
  */
-class AnimateOnChange extends Component<Props, State> implements AnimateOnChange {
+class AnimateOnChange extends Component<Props & any, State> implements AnimateOnChange {
   constructor (props: Props) {
     super(props)
     this.state = { animating: false, clearAnimationClass: false }
@@ -116,16 +116,27 @@ class AnimateOnChange extends Component<Props, State> implements AnimateOnChange
   }
 
   render () {
-    let className = this.props.baseClassName
-
-    if (this.props.animate && !this.state.clearAnimationClass) {
-      className += ` ${this.props.animationClassName}`
+    const { clearAnimationClass } = this.state;
+    const {
+      baseClassName,
+      animate,
+      animationClassName,
+      customTag,
+      children,
+      onAnimationEnd, // unpack, such that otherProps does not contain it
+      ...otherProps
+    } = this.props;
+
+    let className = baseClassName
+
+    if (animate && !clearAnimationClass) {
+      className += ` ${animationClassName}`
     }
 
-    let Tag = this.props.customTag || 'span';
+    let Tag = customTag || 'span';
 
-    return <Tag ref={this.setElementRef} className={className}>
-      {this.props.children}
+    return <Tag ref={this.setElementRef} className={className} {...otherProps}>
+      {children}
     </Tag>
   }
 }