feat(core): replace react-measure with custom hook

packages/core/package.json

@@ -23,9 +23,9 @@
     "d3-shape": "^1.3.5",
     "d3-time-format": "^2.1.3",
     "lodash": "^4.17.11",
-    "react-measure": "^2.2.4",
     "react-spring": "^8.0.27",
-    "recompose": "^0.30.0"
+    "recompose": "^0.30.0",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
     "@nivo/tooltip": "0.62.0",

packages/core/src/components/ResponsiveWrapper.js

@@ -6,40 +6,23 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import Measure from 'react-measure'
+import { useMeasure } from '../hooks'
 
-export default class ResponsiveWrapper extends Component {
-    static propTypes = {
-        children: PropTypes.func.isRequired,
-    }
+const ResponsiveWrapper = ({ children }) => {
+    const [measureRef, bounds] = useMeasure()
+    const shouldRender = bounds.width > 0 && bounds.height > 0
 
-    state = {
-        dimensions: {
-            width: -1,
-            height: -1,
-        },
-    }
-
-    render() {
-        const { width, height } = this.state.dimensions
-
-        const shouldRender = width > 0 && height > 0
+    return (
+        <div ref={measureRef} style={{ width: '100%', height: '100%' }}>
+            {shouldRender && children({ width: bounds.width, height: bounds.height })}
+        </div>
+    )
+}
 
-        return (
-            <Measure
-                bounds
-                onResize={contentRect => {
-                    this.setState({ dimensions: contentRect.bounds })
-                }}
-            >
-                {({ measureRef }) => (
-                    <div ref={measureRef} style={{ width: '100%', height: '100%' }}>
-                        {shouldRender && this.props.children({ width, height })}
-                    </div>
-                )}
-            </Measure>
-        )
-    }
+ResponsiveWrapper.propTypes = {
+    children: PropTypes.func.isRequired,
 }
+
+export default ResponsiveWrapper

packages/core/src/hooks/index.js

@@ -8,5 +8,6 @@
  */
 export * from './useCurveInterpolation'
 export * from './useDimensions'
+export * from './useMeasure'
 export * from './usePartialTheme'
 export * from './useValueFormatter'

packages/core/src/hooks/useMeasure.js

@@ -0,0 +1,23 @@
+import { useRef, useState, useEffect } from 'react'
+import ResizeObserver from 'resize-observer-polyfill'
+
+export const useMeasure = () => {
+    const measureRef = useRef(null)
+    const [bounds, setBounds] = useState({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+    })
+    const [observer] = useState(() => new ResizeObserver(([entry]) => setBounds(entry.contentRect)))
+
+    useEffect(() => {
+        if (measureRef.current) {
+            observer.observe(measureRef.current)
+        }
+
+        return () => observer.disconnect()
+    }, [])
+
+    return [measureRef, bounds]
+}