use forward ref in carbon

components/Carbon.js

@@ -21,12 +21,11 @@ const Watermark = dynamic(() => import('../components/svg/Watermark'), {
 class Carbon extends React.PureComponent {
   static defaultProps = {
     onAspectRatioChange: () => {},
-    onChange: () => {},
+    onChange: () => {}
-    innerRef: () => {}
   }
 
   componentDidMount() {
-    const node = this.exportContainerNode
+    const node = this.props.innerRef.current
     this.mo = new MutationObserver(() => {
       const ratio = node.clientWidth / node.clientHeight
       this.props.onAspectRatioChange(ratio)
@@ -66,11 +65,6 @@ class Carbon extends React.PureComponent {
     }
   }
 
-  getRef = ele => {
-    this.exportContainerNode = ele
-    this.props.innerRef(ele)
-  }
-
   render() {
     const config = { ...DEFAULT_SETTINGS, ...this.props.config }
 
@@ -228,7 +222,7 @@ class Carbon extends React.PureComponent {
 
     return (
       <div className="section">
-        <div className="export-container" ref={this.getRef} id="export-container">
+        <div className="export-container" ref={this.props.innerRef} id="export-container">
           {content}
           <div className="twitter-png-fix" />
         </div>
@@ -257,4 +251,4 @@ class Carbon extends React.PureComponent {
   }
 }
 
-export default Carbon
+export default React.forwardRef((props, ref) => <Carbon {...props} innerRef={ref} />)

components/Editor.js

@@ -55,8 +55,6 @@ class Editor extends React.Component {
     this.resetDefaultSettings = this.resetDefaultSettings.bind(this)
     this.getCarbonImage = this.getCarbonImage.bind(this)
     this.onDrop = this.onDrop.bind(this)
-
-    this.innerRef = node => (this.carbonNode = node)
   }
 
   async componentDidMount() {
@@ -99,6 +97,8 @@ class Editor extends React.Component {
       window.navigator.userAgent.indexOf('Chrome') === -1
   }
 
+  carbonNode = React.createRef()
+
   updateState = updates => this.setState(updates, () => this.props.onUpdate(this.state))
 
   updateCode = code => this.updateState({ code })
@@ -120,7 +120,7 @@ class Editor extends React.Component {
       return this.props.api.image(encodedState)
     }
 
-    const node = this.carbonNode
+    const node = this.carbonNode.current
 
     const map = new Map()
     const undoMap = value => {
@@ -340,7 +340,7 @@ class Editor extends React.Component {
                   onAspectRatioChange={this.updateAspectRatio}
                   titleBar={titleBar}
                   updateTitleBar={this.updateTitleBar}
-                  innerRef={this.innerRef}
+                  ref={this.carbonNode}
                 >
                   {code != null ? code : DEFAULT_CODE}
                 </Carbon>

pages/embed.js

@@ -78,7 +78,7 @@ class Embed extends React.Component {
         // Used by embed provider
         src: window.location.toString(),
         context: 'iframe.resize',
-        height: this.ref.current.exportContainerNode.offsetHeight
+        height: this.ref.current.offsetHeight
       }),
       '*'
     )