interactive-video-labs
diff --git a/‎examples/index.html‎
Lines changed: 12 additions & 0 deletions b/‎examples/index.html‎
Lines changed: 12 additions & 0 deletions
diff --git a/‎examples/index.tsx‎
Lines changed: 26 additions & 0 deletions b/‎examples/index.tsx‎
Lines changed: 26 additions & 0 deletions
diff --git a/‎package.json‎
Lines changed: 14 additions & 5 deletions b/‎package.json‎
Lines changed: 14 additions & 5 deletions
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Video React Wrapper Example</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="./dist/index.js"></script>
+</body>
+</html>
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { InteractiveVideo } from '../dist/index';
+
+const App = () => {
+  return (
+    <div>
+      <h1>Interactive Video React Wrapper Example</h1>
+      <div style={{ width: '80%', margin: '0 auto' }}>
+        <InteractiveVideo
+          videoUrl="https://interactive-video-labs.github.io/interactive-video-demos/videos/big_buck_bunny.mp4"
+          autoplay={true}
+          onAnalyticsEvent={(event, payload) => {
+            console.log('Analytics Event:', event, payload);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
@@ -2,6 +2,7 @@
   "name": "@interactive-video-labs/react",
   "version": "0.0.1",
   "description": "Thin React wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in React apps.",
+  "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -16,11 +17,13 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts",
-    "dev": "tsup src/index.ts --watch --format esm,cjs",
+    "build": "tsup src/index.tsx --format esm,cjs --dts",
+    "dev": "tsup src/index.tsx --watch --format esm,cjs",
     "test": "vitest run",
     "clean": "rm -rf dist",
-    "prepare": "pnpm build"
+    "prepare": "pnpm build",
+    "serve-examples": "pnpm build-examples && http-server examples -c-1",
+    "build-examples": "esbuild examples/index.tsx --bundle --outfile=examples/dist/index.js --jsx=automatic"
   },
   "keywords": [
     "interactive-video",
@@ -44,14 +47,20 @@
   },
   "packageManager": "pnpm@10.13.1",
   "peerDependencies": {
+    "@interactive-video-labs/core": "^0.1.2",
     "react": ">=17.0.0 || >=18.0.0",
-    "react-dom": ">=17.0.0 || >=18.0.0",
-    "@interactive-video-labs/core": "^0.1.2"
+    "react-dom": ">=17.0.0 || >=18.0.0"
   },
   "dependencies": {
     "jsdom": "^26.1.0",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.1.9",
+    "http-server": "^14.1.1"
   }
 }