diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..18b40cc
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,2 @@
+// https://vitejs.dev/guide/features.html#typescript-compiler-options
+///
diff --git a/package.json b/package.json
index d641e83..840dc62 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"typings": "lib/indeqx.d.ts",
"scripts": {
"start": "jest --watchAll --silent --coverage",
+ "app": "yarn build && vite",
"test": "jest --maxWorkers 2",
"test:ci": "jest --coverage",
"commit": "cz",
@@ -57,6 +58,7 @@
"@testing-library/react-hooks": "^8.0.1",
"@types/jest": "^29.5.10",
"@typescript-eslint/eslint-plugin": "^6.4.0",
+ "@vitejs/plugin-react": "^4.2.1",
"commit-and-tag-version": "^12.0.0",
"commitizen": "^4.3.0",
"concurrently": "^8.2.2",
@@ -77,10 +79,12 @@
"prettier": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.20.1",
"rimraf": "^5.0.5",
"ts-jest": "^29.1.1",
"ts-node": "^10.9.1",
- "typescript": "*"
+ "typescript": "*",
+ "vite": "^5.0.7"
},
"config": {
"commitizen": {
diff --git a/src/app-example/app.html b/src/app-example/app.html
new file mode 100644
index 0000000..b6b3742
--- /dev/null
+++ b/src/app-example/app.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Miro - React hooks app example
+
+
+
+
+
+
+
diff --git a/src/app-example/app.tsx b/src/app-example/app.tsx
new file mode 100644
index 0000000..7fe4581
--- /dev/null
+++ b/src/app-example/app.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+import { MiroProvider } from "../../esm";
+
+import { UseCurrentUser } from "./pages/UserCurrentUser";
+import { Index } from "./pages/Index";
+import { Miro } from "./pages/UseMiro";
+import { UseInfo } from "./pages/UseInfo";
+import { UseOnlineUsers } from "./pages/UseOnlineUsers";
+import { UseSelectedItems } from "./pages/UseSelectedItems";
+import { UseViewport } from "./pages/UseViewport";
+
+const router = createBrowserRouter([
+ {
+ path: "/app.html",
+ element: ,
+ },
+ {
+ path: "/miro",
+ element: ,
+ },
+ {
+ path: "/use-current-user",
+ element: ,
+ },
+ {
+ path: "/use-info",
+ element: ,
+ },
+ {
+ path: "/use-online-users",
+ element: ,
+ },
+ {
+ path: "/use-selected-items",
+ element: ,
+ },
+ {
+ path: "/use-viewport",
+ element: ,
+ },
+]);
+
+const App = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+root.render();
diff --git a/src/app-example/index.html b/src/app-example/index.html
new file mode 100644
index 0000000..b0fe182
--- /dev/null
+++ b/src/app-example/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Miro - React hooks app example
+
+
+
+
+
diff --git a/src/app-example/index.ts b/src/app-example/index.ts
new file mode 100644
index 0000000..ba766d0
--- /dev/null
+++ b/src/app-example/index.ts
@@ -0,0 +1,7 @@
+export async function init() {
+ miro.board.ui.on("icon:click", async () => {
+ await miro.board.ui.openPanel({ url: "app.html" });
+ });
+}
+
+init();
diff --git a/src/app-example/pages/Index.tsx b/src/app-example/pages/Index.tsx
new file mode 100644
index 0000000..2ac5b13
--- /dev/null
+++ b/src/app-example/pages/Index.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+export const Index: React.FC = () => {
+ return (
+
+
+ -
+ useMiro
+
+ -
+ useCurrentUser
+
+ -
+ useInfo
+
+ -
+ useOnlineUsers
+
+ -
+ useSelectedItems
+
+ -
+ useViewport
+
+
+
+ );
+};
diff --git a/src/app-example/pages/UseInfo.tsx b/src/app-example/pages/UseInfo.tsx
new file mode 100644
index 0000000..56bec7c
--- /dev/null
+++ b/src/app-example/pages/UseInfo.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import { useInfo } from "../../../esm";
+
+export const UseInfo: React.FC = () => {
+ const { status, error, result } = useInfo();
+
+ if (status === "loading") {
+ return Fetching board info...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ if (status === "success") {
+ return (
+
+
Current board info
+
{JSON.stringify(result, null, 2)}
+
{JSON.stringify(miro, null, 2)};
+};
diff --git a/src/app-example/pages/UseOnlineUsers.tsx b/src/app-example/pages/UseOnlineUsers.tsx
new file mode 100644
index 0000000..f30baf4
--- /dev/null
+++ b/src/app-example/pages/UseOnlineUsers.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import { useOnlineUsers } from "../../../esm";
+
+export const UseOnlineUsers: React.FC = () => {
+ const { status, result, error } = useOnlineUsers();
+
+ if (status === "loading") {
+ return Fetching online users...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ if (status === "success") {
+ return (
+
+
Online users
+
+ {result.map((user) => (
+ -
+ #{user.id} - {user.name}
+
+ ))}
+
+
Fetching selected items...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ if (status === "success") {
+ return (
+
+
Selected items:
+
+ {result.map((item) => (
+ -
+ #{item.id} - {item.type}
+
+ ))}
+
+
Fetching viewport...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ const handleSetViewport = async () => {
+ await set({
+ viewport: {
+ x: 200,
+ y: 100,
+ width: 1280,
+ height: 720,
+ },
+ padding: {
+ top: 100,
+ left: 200,
+ bottom: 50,
+ right: 20,
+ },
+ animationDurationInMs: 1000,
+ });
+ };
+
+ const handleZoomTo = async () => {
+ if (selected.result.length < 1) {
+ return;
+ }
+
+ await zoomTo(selected.result);
+ };
+
+ if (status === "success") {
+ return (
+
+
Selected items:
+
+ -
+ X and Y: {result?.x} x {result?.y}
+
+ -
+ Size (WxH): {result?.width} x {result?.height}
+
+ - Zoom level {result?.zoomLevel}
+
+
+
+
Fetching user...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ if (status === "success") {
+ return The current user is "{result?.name}"
;
+ }
+};
diff --git a/src/useCurrentUser/useCurrentUser.md b/src/useCurrentUser/useCurrentUser.md
index 6609035..5a39d1b 100644
--- a/src/useCurrentUser/useCurrentUser.md
+++ b/src/useCurrentUser/useCurrentUser.md
@@ -1,3 +1,43 @@
# useCurrentUser
-Get current [Miro user](https://developers.miro.com/docs/websdk-reference-board#getuserinfo).
\ No newline at end of file
+Get current [Miro user](https://developers.miro.com/docs/websdk-reference-board#getuserinfo).
+
+**Note**: Make sure you are running this code in a configured [Miro WebSDK app](https://developers.miro.com/docs/build-your-first-hello-world-app).
+
+## Example
+
+
+```tsx
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { useCurrentUser } from "@mirohq/websdk-react-hooks";
+
+const CurrentUser: React.FC = () => {
+ const { status, result, error } = useCurrentUser();
+
+ if (status === "loading") {
+ return Fetching user...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ if (status === "success") {
+ return The current user is "{result?.name}"
;
+ }
+}
+
+const App = () => {
+ return (
+
+
+
+ )
+};
+
+
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+root.render();
+```
\ No newline at end of file
diff --git a/src/useInfo/useInfo.md b/src/useInfo/useInfo.md
index b758102..bdf841b 100644
--- a/src/useInfo/useInfo.md
+++ b/src/useInfo/useInfo.md
@@ -1,3 +1,52 @@
# useInfo
-Get [Miro board info](https://developers.miro.com/docs/websdk-reference-board#getinfo).
\ No newline at end of file
+Get [Miro board info](https://developers.miro.com/docs/websdk-reference-board#getinfo).
+
+# useCurrentUser
+
+Get current [Miro user](https://developers.miro.com/docs/websdk-reference-board#getuserinfo).
+
+**Note**: Make sure you are running this code in a configured [Miro WebSDK app](https://developers.miro.com/docs/build-your-first-hello-world-app).
+
+## Example
+
+
+```tsx
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { useInfo } from "@mirohq/websdk-react-hooks";
+
+export const UseInfo: React.FC = () => {
+ const { status, error, result } = useInfo();
+
+ if (status === "loading") {
+ return Fetching board info...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ if (status === "success") {
+ return (
+
+
Current board info
+
{JSON.stringify(result, null, 2)}
+
{JSON.stringify(miro, null, 2)};
+};
+
+const App = () => {
+ return (
+
+
+
+ )
+};
+
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+root.render();
+```
\ No newline at end of file
diff --git a/src/useOnlineUsers/useOnlineUsers.md b/src/useOnlineUsers/useOnlineUsers.md
index bc25b21..543769e 100644
--- a/src/useOnlineUsers/useOnlineUsers.md
+++ b/src/useOnlineUsers/useOnlineUsers.md
@@ -1,3 +1,54 @@
# useOnlineUsers
-Get [online users](https://developers.miro.com/docs/websdk-reference-board#getonlineusers) in a Miro board.
\ No newline at end of file
+Get [online users](https://developers.miro.com/docs/websdk-reference-board#getonlineusers) in a Miro board.
+
+**Note**: Make sure you are running this code in a configured [Miro WebSDK app](https://developers.miro.com/docs/build-your-first-hello-world-app).
+
+## Example
+
+
+```tsx
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { useOnlineUsers } from "@mirohq/websdk-react-hooks";
+
+export const UseOnlineUsers: React.FC = () => {
+ const { status, result, error } = useOnlineUsers();
+
+ if (status === "loading") {
+ return Fetching online users...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ if (status === "success") {
+ return (
+
+
Online users
+
+ {result.map((user) => (
+ -
+ #{user.id} - {user.name}
+
+ ))}
+
+
Fetching selected items...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ if (status === "success") {
+ return (
+
+
Selected items:
+
+ {result.map((item) => (
+ -
+ #{item.id} - {item.type}
+
+ ))}
+
+
Fetching viewport...
;
+ }
+
+ if (error) {
+ return Something went wrong
;
+ }
+
+ const handleSetViewport = async () => {
+ await set({
+ viewport: {
+ x: 200,
+ y: 100,
+ width: 1280,
+ height: 720,
+ },
+ padding: {
+ top: 100,
+ left: 200,
+ bottom: 50,
+ right: 20,
+ },
+ animationDurationInMs: 1000,
+ });
+ };
+
+ const handleZoomTo = async () => {
+ if (selected.result.length < 1) {
+ return;
+ }
+
+ await zoomTo(selected.result);
+ };
+
+ if (status === "success") {
+ return (
+
+
Selected items:
+
+ -
+ X and Y: {result?.x} x {result?.y}
+
+ -
+ Size (WxH): {result?.width} x {result?.height}
+
+ - Zoom level {result?.zoomLevel}
+
+
+
+