fix createRef

Author: drcmda

examples/demos/dashoffset/index.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Spring, animated } from 'react-spring'
+import { TimingAnimation } from '../../../src/addons'
+import { GradientPinkRed as Gradient } from '@vx/gradient'
+
+export default class App extends React.Component {
+  state = { offset: 0 }
+  path = React.createRef()
+  componentDidMount() {
+    this.setState({ offset: this.path.current.getTotalLength() })
+  }
+  render() {
+    const { offset } = this.state
+    return (
+      <svg width="500" viewBox="0 0 23 23">
+        <Gradient id="gradient" />
+        <g fill="transparent" stroke="url(#gradient)" strokeWidth="0.2">
+          <Spring
+            native
+            reset
+            from={{ dash: offset }}
+            to={{ dash: 0 }}
+            impl={TimingAnimation}
+            config={{ duration: 5000 }}>
+            {props => (
+              <animated.path
+                ref={this.path}
+                strokeDasharray={offset}
+                strokeDashoffset={props.dash}
+                d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+              />
+            )}
+          </Spring>
+        </g>
+      </svg>
+    )
+  }
+}

examples/index.js

@@ -24,7 +24,8 @@ const components = [
   'script',
   'auto',
   'router',
-  'scroll',
+  //'scroll',
+  //'dashoffset'
 ].reduce(
   (acc, path) => ({
     ...acc,
@@ -37,7 +38,7 @@ const components = [
 )
 
 const DEBUG = false
-const DebugComponent = components['timing']
+const DebugComponent = components['dashoffset']
 
 ReactDOM.render(
   DEBUG ? (

src/animated/createAnimatedComponent.js

@@ -60,22 +60,25 @@ export default function createAnimatedComponent(Component) {
       this.attachProps(nextProps)
     }
 
+    setRef = node => {
+      this.node = node
+      const forwardRef = this.props.forwardRef
+      if (forwardRef) {
+        // If it's a function, assume it's a ref callback
+        if (typeof forwardRef === 'function') forwardRef(node)
+        // If it's an object and has a 'current' property, assume it's a ref object
+        else if (typeof forwardRef === 'object') forwardRef.current = node
+      }
+    }
+
     render() {
       const forwardRef = this.props.forwardRef
       const {
         scrollTop,
         scrollLeft,
         ...animatedProps
       } = this._propsAnimated.__getValue()
-      return (
-        <Component
-          {...animatedProps}
-          ref={node => {
-            this.node = node
-            if (forwardRef) forwardRef(node)
-          }}
-        />
-      )
+      return <Component {...animatedProps} ref={this.setRef} />
     }
   }
   return React.forwardRef((props, ref) => (

src/targets/web/globals.js

@@ -101,8 +101,9 @@ Globals.injectApplyAnimatedValues(
 
       // Set attributes ...
       for (let name in attributes) {
-        if (instance.getAttribute(name))
-          instance.setAttribute(name, attributes[name])
+        let dashCase = name.replace(/([A-Z])/g, $1 => '-' + $1.toLowerCase())
+        if (typeof instance.getAttribute(dashCase) !== 'undefined')
+          instance.setAttribute(dashCase, attributes[name])
       }
     } else return false
   },