Hook-based API

package.json

@@ -70,7 +70,9 @@
   },
   "peerDependencies": {
     "plotly.js": ">1.34.0",
-    "react": ">0.13.0"
+    "react": ">0.13.0",
+    "flyd": ">0.2.8",
+    "ramda": ">0.28.0"
   },
   "browserify-global-shim": {
     "react": "React"

src/usePlotly.js

@@ -0,0 +1,50 @@
+import { useLayoutEffect, useState, useMemo } from 'react';
+import { head, prop, compose, pick, objOf, mergeDeepRight } from 'ramda';
+import { stream, scan } from 'flyd';
+
+/**
+* A simple debouncing function
+*/
+const debounce = (fn, delay) => {
+   let timeout;
+
+   return function (...args) {
+      const functionCall = () => fn.apply(this, args);
+
+      timeout && clearTimeout(timeout);
+      timeout = setTimeout(functionCall, delay);
+   };
+};
+
+const getSizeForLayout = compose(objOf('layout'), pick(['width', 'height']), prop('contentRect'), head);
+
+export default function usePlotly() {
+   const updates = useMemo(stream, []);
+   const appendData = useMemo(stream, []);
+   const plotlyState = useMemo(
+      () => scan(mergeDeepRight, { data: [], config: {}, layout: {} }, updates),
+      []
+   );
+
+   const observer = new ResizeObserver(debounce(compose(updates, getSizeForLayout), 100));
+   const [internalRef, setRef] = useState(null);
+   useLayoutEffect(() => {
+      if (internalRef) {
+         observer.observe(internalRef);
+         const endS = plotlyState.map(state => {
+            Plotly.react(internalRef, state);
+         });
+
+         const endAppend = appendData.map(({ data, tracePos }) => Plotly.extendTraces(internalRef, data, tracePos));
+
+         return () => {
+            Plotly.purge(internalRef);
+            observer.unobserve(internalRef);
+            endAppend.end(true);
+            endS.end(true);
+         };
+      }
+   }, [internalRef, plotlyState, updates, appendData]);
+
+   return { ref: setRef, updates, appendData };
+}