@rerun-io/web-viewer-react 0.0.5

package/README.md

@@ -0,0 +1,37 @@
+# Rerun Web Viewer
+
+Embed the Rerun web viewer within your React app.
+
+<p align="center">
+  <img width="800" alt="Rerun Viewer" src="https://github.com/rerun-io/rerun/assets/2624717/c4900538-fc3a-43b8-841a-8d226e7b5a2e">
+</p>
+
+## Install
+
+```
+$ npm i @rerun-io/web-viewer-react
+```
+
+## Usage
+
+```jsx
+import WebViewer from "@rerun-io/web-viewer-react";
+
+export default function App() {
+  return (
+    <div>
+      <WebViewer rrd="...">
+    </div>
+  )
+}
+```
+
+ℹ️ Note:
+This package only targets recent versions of browsers.
+If your target browser does not support Wasm imports, you may need to install additional plugins for your bundler.
+
+## Development
+
+```
+$ npm run build
+```

package/index.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from "react";
+import * as rerun from "@rerun-io/web-viewer";
+
+/** @typedef {import("react")} React */
+
+/**
+ * @typedef Props
+ * @property {string} rrd URL of the `.rrd` file to load
+ * @property {string} [width] CSS width of the viewer's parent div
+ * @property {string} [height] CSS height of the viewer's parent div
+ */
+
+/**
+ * Wrapper for `WebViewer` from the `@rerun-io/web-viewer`.
+ *
+ * This component creates and manages the web viewer's `canvas` element.
+ *
+ * The web viewer is restarted each time `rrd` changes.
+ * Starting the web viewer is an expensive operation, so be careful with changing it too often!
+ *
+ * @param {Props} props
+ */
+export default function WebViewer(props) {
+  const { width = "100%", height = "640px", rrd } = props;
+
+  /**
+   * Parent DOM node
+   * @type {React.RefObject<HTMLDivElement>}
+   */
+  const parent = useRef(null);
+  /**
+   * Web viewer instance
+   * @type {React.MutableRefObject<rerun.WebViewer | undefined>}
+   */
+  const viewer = useRef();
+
+  useEffect(
+    () => {
+      if (parent.current) {
+        // Start the web viewer when the parent div is mounted to the DOM.
+        const w = new rerun.WebViewer();
+        w.start(rrd);
+        viewer.current = w;
+        return () => {
+          // Stop the web viewer when the component is unmounted.
+          w.stop();
+          viewer.current = undefined;
+        };
+      }
+    },
+    // The web viewer will be restarted when:
+    // - `parent` is added/moved/removed in the DOM
+    // - `rrd` changes
+    [parent.current, rrd]
+  );
+
+  return React.createElement("div", {
+    className: "rerun-web-viewer",
+    style: { width, height, position: "relative" },
+    ref: parent,
+  });
+}
+

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@rerun-io/web-viewer-react",
+  "version": "0.0.5",
+  "description": "Embed the Rerun web viewer in your React app",
+  "private": false,
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rerun-io/rerun.git"
+  },
+  "author": "rerun-io",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rerun-io/rerun/issues"
+  },
+  "homepage": "https://rerun.io",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "files": [
+    "index.d.ts",
+    "index.d.ts.map",
+    "index.js",
+    "package.json",
+    "tsconfig.json"
+  ],
+  "dependencies": {
+    "@rerun-io/web-viewer": "^0.0.5",
+    "@types/react": "^18.2.33",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "dts-buddy": "^0.3.0"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "strict": true,
+    "target": "ES2020",
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+  },
+  "include": [
+    "index.js",
+    "re_viewer.js",
+  ]
+}