fix(funnel): switch to useAnimatedPath hook

plouc · Oct 22, 2020 · d457841 · d457841
1 parent 5ddb2ec
commit d457841
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/packages/funnel/src/Part.js b/packages/funnel/src/Part.js
@@ -9,15 +9,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useSpring, animated } from 'react-spring'
-import { useMotionConfig } from '@nivo/core'
+import { useAnimatedPath, useMotionConfig } from '@nivo/core'
 
 export const Part = ({ part, areaGenerator, borderGenerator }) => {
     const { animate, config: motionConfig } = useMotionConfig()
 
+    const animatedAreaPath = useAnimatedPath(areaGenerator(part.areaPoints))
+    const animatedBorderPath = useAnimatedPath(borderGenerator(part.borderPoints))
     const animatedProps = useSpring({
-        areaPath: areaGenerator(part.areaPoints),
         areaColor: part.color,
-        borderPath: borderGenerator(part.borderPoints),
         borderWidth: part.borderWidth,
         borderColor: part.borderColor,
         config: motionConfig,
@@ -28,15 +28,15 @@ export const Part = ({ part, areaGenerator, borderGenerator }) => {
         <>
             {part.borderWidth > 0 && (
                 <animated.path
-                    d={animatedProps.borderPath}
+                    d={animatedBorderPath}
                     stroke={animatedProps.borderColor}
                     strokeWidth={animatedProps.borderWidth}
                     strokeOpacity={part.borderOpacity}
                     fill="none"
                 />
             )}
             <animated.path
-                d={animatedProps.areaPath}
+                d={animatedAreaPath}
                 fill={animatedProps.areaColor}
                 fillOpacity={part.fillOpacity}
                 onMouseEnter={part.onMouseEnter}