feat(BarCanvas): allow to use ref to access the underlying canvas

plouc · Nov 12, 2020 · fb91ca4 · fb91ca4
1 parent ce5b67a
commit fb91ca4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/bar/src/BarCanvas.js b/packages/bar/src/BarCanvas.js
@@ -260,15 +260,15 @@ class BarCanvas extends Component {
     }
 
     render() {
-        const { outerWidth, outerHeight, pixelRatio, isInteractive, theme, ref } = this.props
+        const { outerWidth, outerHeight, pixelRatio, isInteractive, theme, canvasRef } = this.props
 
         return (
             <Container isInteractive={isInteractive} theme={theme} animate={false}>
                 {({ showTooltip, hideTooltip }) => (
                     <canvas
                         ref={surface => {
                             this.surface = surface
-                            if (ref) ref.current = surface
+                            if (canvasRef) canvasRef.current = surface
                         }}
                         width={outerWidth * pixelRatio}
                         height={outerHeight * pixelRatio}
@@ -290,4 +290,5 @@ class BarCanvas extends Component {
 BarCanvas.propTypes = BarPropTypes
 BarCanvas.defaultProps = BarDefaultProps
 
-export default setDisplayName('BarCanvas')(enhance(BarCanvas))
+const EnhancedBarCanvas = setDisplayName('BarCanvas')(enhance(BarCanvas))
+export default React.forwardRef((props, ref) => <EnhancedBarCanvas {...props} canvasRef={ref} />)
diff --git a/packages/bar/src/ResponsiveBarCanvas.js b/packages/bar/src/ResponsiveBarCanvas.js
@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
 import BarCanvas from './BarCanvas'
 
@@ -16,4 +16,4 @@ const ResponsiveBarCanvas = (props, ref) => (
     </ResponsiveWrapper>
 )
 
-export default forwardRef(ResponsiveBarCanvas)
+export default React.forwardRef(ResponsiveBarCanvas)