Resizable React-Plotly

example.tsx

function rescalePlot(plotDivId: string) {
    let plotDiv = document.getElementById(plotDivId);
    plotDiv.dispatchEvent(new Event('resize'))
}


//--inside your render function--
<ResizeSensor onResize={() => rescalePlot(plotDivId)}>
    <Plot
        divId={plotDivId}
        data={}
        layout={}
        useResizeHandler={true}
        style={{ width: '100%', height: '100%' }}
    />
</ResizeSensor>

react-plotly.js+2.4.0.patch

diff --git a/node_modules/react-plotly.js/factory.js b/node_modules/react-plotly.js/factory.js
index 61f5ec6..de5e7f0 100644
--- a/node_modules/react-plotly.js/factory.js
+++ b/node_modules/react-plotly.js/factory.js
@@ -208,12 +208,21 @@ function plotComponentFactory(Plotly) {
 
           window.addEventListener('resize', this.resizeHandler);
 
+          if (this.props.divId) {
+            this.plotDiv = document.getElementById(this.props.divId);
+            if (this.plotDiv) this.plotDiv.addEventListener('resize', this.resizeHandler);
+          }
+
           if (invoke) {
             this.resizeHandler();
           }
         } else if (!this.props.useResizeHandler && this.resizeHandler) {
           window.removeEventListener('resize', this.resizeHandler);
           this.resizeHandler = null;
+          if (this.plotDiv) {
+            this.plotDiv.removeEventListener('resize');
+            this.plotDiv = null;
+          }
         }
       }
     }, {