diff --git a/packages/core/package.json b/packages/core/package.json
index 6b1304e2d5..097a576eef 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -15,7 +15,6 @@
"dist/"
],
"dependencies": {
- "@nivo/tooltip": "0.62.0",
"d3-color": "^1.2.3",
"d3-format": "^1.4.4",
"d3-hierarchy": "^1.1.8",
@@ -31,6 +30,7 @@
"recompose": "^0.30.0"
},
"peerDependencies": {
+ "@nivo/tooltip": "0.62.0",
"prop-types": ">= 15.5.10 < 16.0.0",
"react": ">= 16.8.4 < 17.0.0"
},
diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
index 653a68868a..c8667c6bb9 100644
--- a/packages/tooltip/package.json
+++ b/packages/tooltip/package.json
@@ -15,11 +15,11 @@
"dist/"
],
"dependencies": {
- "@nivo/core": "0.62.0",
"react-measure": "^2.2.4",
- "react-motion": "^0.5.2"
+ "react-spring": "^8.0.27"
},
"peerDependencies": {
+ "@nivo/core": "0.62.0",
"prop-types": ">= 15.5.10 < 16.0.0"
},
"publishConfig": {
diff --git a/packages/tooltip/src/components/CrosshairLine.js b/packages/tooltip/src/components/CrosshairLine.js
index 9d3b995972..17d100be57 100644
--- a/packages/tooltip/src/components/CrosshairLine.js
+++ b/packages/tooltip/src/components/CrosshairLine.js
@@ -8,12 +8,12 @@
*/
import React, { memo, useMemo } from 'react'
import PropTypes from 'prop-types'
-import { Motion, spring } from 'react-motion'
+import { useSpring, animated } from 'react-spring'
import { useTheme, useMotionConfig } from '@nivo/core'
const CrosshairLine = memo(({ x0, x1, y0, y1 }) => {
const theme = useTheme()
- const { animate, springConfig } = useMotionConfig()
+ const { animate, config: springConfig } = useMotionConfig()
const style = useMemo(
() => ({
...theme.crosshair.line,
@@ -22,31 +22,16 @@ const CrosshairLine = memo(({ x0, x1, y0, y1 }) => {
[theme.crosshair.line]
)
- if (animate !== true) {
- return
- }
+ const animatedProps = useSpring({
+ x1: x0,
+ x2: x1,
+ y1: y0,
+ y2: y1,
+ config: springConfig,
+ immediate: !animate,
+ })
- return (
-
- {line => (
-
- )}
-
- )
+ return
})
CrosshairLine.displayName = 'CrosshairLine'
diff --git a/packages/tooltip/src/components/TooltipWrapper.js b/packages/tooltip/src/components/TooltipWrapper.js
index 540e099c70..41fe029eb7 100644
--- a/packages/tooltip/src/components/TooltipWrapper.js
+++ b/packages/tooltip/src/components/TooltipWrapper.js
@@ -6,10 +6,10 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-import React, { memo, useMemo, useState } from 'react'
+import React, { memo, useMemo, useState, useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import Measure from 'react-measure'
-import { Motion, spring } from 'react-motion'
+import { useSpring, animated } from 'react-spring'
import { useTheme, useMotionConfig } from '@nivo/core'
const TOOLTIP_OFFSET = 14
@@ -23,9 +23,14 @@ const tooltipStyle = {
}
const TooltipWrapper = memo(({ position, anchor, children }) => {
- const [dimensions, setDimensions] = useState(null)
const theme = useTheme()
- const { animate, springConfig } = useMotionConfig()
+ const { animate, config: springConfig } = useMotionConfig()
+
+ const [dimensions, setDimensions] = useState(null)
+ const previousDimensions = useRef(null)
+ useEffect(() => {
+ previousDimensions.current = dimensions
+ })
let x = Math.round(position[0])
let y = Math.round(position[1])
@@ -48,71 +53,50 @@ const TooltipWrapper = memo(({ position, anchor, children }) => {
}
}
+ const isInitializing = dimensions === null || previousDimensions.current === null
+
+ const animatedProps = useSpring({
+ transform: `translate(${x}px, ${y}px)`,
+ config: springConfig,
+ immediate: !animate || isInitializing,
+ })
+
const style = useMemo(
() => ({
...tooltipStyle,
...theme.tooltip,
- transform: `translate(${x}px, ${y}px)`,
- opacity: dimensions === null ? 0 : 1,
+ opacity: isInitializing ? 0 : 1,
}),
- [x, y, dimensions, theme.tooltip]
+ [dimensions, theme.tooltip, isInitializing]
)
// if we don't have dimensions yet, we use
// the non animated version with a 0 opacity
// to avoid a flash effect and weird initial transition
- if (animate !== true || dimensions === null) {
- return (
- {
- setDimensions([bounds.width, bounds.height])
- }}
- >
- {({ measureRef }) => (
-
- {children}
-
- )}
-
- )
- }
-
return (
- {
+ setDimensions([bounds.width, bounds.height])
}}
>
- {animatedPosition => (
- {
- setDimensions([bounds.width, bounds.height])
- }}
- >
- {({ measureRef }) => (
-
- {children}
-
- )}
-
- )}
-
+ {({ measureRef }) => {
+ return (
+
+ {children}
+
+ )
+ }}
+
)
})