@microsoft/live-share-react 2.0.0-internal.1 → 2.0.0-internal.10

package/bin/esm/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/bin/esm/types/index.js

@@ -0,0 +1,4 @@
+export * from "./ActionTypes.js";
+export * from "./ResultTypes.js";
+export * from "./PropTypes.js";
+//# sourceMappingURL=index.js.map

package/bin/esm/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/bin/esm/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./type-check.js";
+//# sourceMappingURL=index.d.ts.map

package/bin/esm/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/bin/esm/utils/index.js

@@ -0,0 +1,2 @@
+export * from "./type-check.js";
+//# sourceMappingURL=index.js.map

package/bin/esm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/bin/esm/utils/type-check.d.ts

@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+import { ExtendedMediaMetadata, IMediaPlayer } from "@microsoft/live-share-media";
+import React from "react";
+export declare function isRefObject<T>(value: any): value is React.RefObject<T>;
+export declare function isMediaElement(value: any): value is IMediaPlayer;
+export declare function isExtendedMediaMetadata(value: any): value is ExtendedMediaMetadata;
+export declare function isMap(value: any): value is Map<string, any>;
+export declare function isEntries(value: any): value is readonly (readonly [string, any])[];
+export declare function isJSON(value: any): value is {
+    [key: string]: any;
+};
+//# sourceMappingURL=type-check.d.ts.map

package/bin/esm/utils/type-check.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-check.d.ts","sourceRoot":"","sources":["../../../src/utils/type-check.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACH,qBAAqB,EACrB,YAAY,EACf,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAEtE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,YAAY,CAoBhE;AAED,wBAAgB,uBAAuB,CACnC,KAAK,EAAE,GAAG,GACX,KAAK,IAAI,qBAAqB,CAEhC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAE3D;AAED,wBAAgB,SAAS,CACrB,KAAK,EAAE,GAAG,GACX,KAAK,IAAI,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAU9C;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAOlE"}

package/bin/esm/utils/type-check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-check.js","sourceRoot":"","sources":["../../../src/utils/type-check.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,MAAM,UAAU,WAAW,CAAI,KAAU;IACrC,OAAO,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAU;IACrC,IAAI,KAAK,EAAE,CAAC;QACR,OAAO,CACH,KAAK,CAAC,UAAU,KAAK,SAAS;YAC9B,KAAK,CAAC,WAAW,KAAK,SAAS;YAC/B,KAAK,CAAC,QAAQ,KAAK,SAAS;YAC5B,KAAK,CAAC,KAAK,KAAK,SAAS;YACzB,KAAK,CAAC,KAAK,KAAK,SAAS;YACzB,KAAK,CAAC,MAAM,KAAK,SAAS;YAC1B,KAAK,CAAC,YAAY,KAAK,SAAS;YAChC,KAAK,CAAC,GAAG,KAAK,SAAS;YACvB,KAAK,CAAC,MAAM,KAAK,SAAS;YAC1B,KAAK,CAAC,IAAI,KAAK,SAAS;YACxB,KAAK,CAAC,KAAK,KAAK,SAAS;YACzB,KAAK,CAAC,IAAI,KAAK,SAAS;YACxB,KAAK,CAAC,gBAAgB,KAAK,SAAS;YACpC,KAAK,CAAC,mBAAmB,KAAK,SAAS,CAC1C,CAAC;IACN,CAAC;IACD,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,uBAAuB,CACnC,KAAU;IAEV,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,CAAA,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAU;IAC5B,OAAO,KAAK,YAAY,GAAG,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,SAAS,CACrB,KAAU;IAEV,IAAI,CAAC;QACD,MAAM,QAAQ,GAAG,KAAyC,CAAC;QAC3D,IAAI,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACb,OAAO,KAAK,CAAC;IACjB,CAAC;AACL,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,KAAU;IAC7B,IAAI,CAAC;QACD,MAAM,QAAQ,GAAG,KAA+B,CAAC;QACjD,OAAO,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5C,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACb,OAAO,KAAK,CAAC;IACjB,CAAC;AACL,CAAC"}

package/package.json

@@ -1,48 +1,62 @@
 {
-  "name": "@microsoft/live-share-react",
-  "version": "2.0.0-internal.1",
-  "description": "Build collaborative React apps using Microsoft's Fluid & Live Share frameworks with ease.",
-  "author": "Microsoft",
-  "license": "SEE LICENSE IN LICENSE",
-  "main": "./bin/index.js",
-  "types": "./bin/index.d.ts",
-  "scripts": {
-    "clean": "npx shx rm -rf bin",
-    "build": "tsc -p tsconfig.build.json",
-    "typecheck": "tsc"
-  },
-  "dependencies": {
-    "@microsoft/live-share-turbo": "2.0.0-internal.1",
-    "url": "^0.11.0",
-    "uuid": "^9.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@microsoft/live-share": "2.0.0-internal.1",
-    "@microsoft/live-share-canvas": "2.0.0-internal.1",
-    "@microsoft/live-share-media": "2.0.0-internal.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/uuid": "^9.0.1",
-    "babel-loader": "^9.1.2",
-    "fluid-framework": "^2.0.0-rc.1",
-    "typescript": "^5.0.4"
-  },
-  "peerDependencies": {
-    "@microsoft/live-share": "2.0.0-internal.1",
-    "@microsoft/live-share-canvas": "2.0.0-internal.1",
-    "@microsoft/live-share-media": "2.0.0-internal.1",
-    "fluid-framework": "^2.0.0-rc || ^2.0.0-internal",
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
-  },
-  "repository": {
-      "directory": "packages/live-share-react",
-      "type": "git",
-      "url": "https://github.com/microsoft/live-share-sdk"
-  },
-  "homepage": "https://aka.ms/teamsliveshare",
-  "bugs": {
-      "url": "https://github.com/microsoft/live-share-sdk/issues"
-  }
-}
+    "name": "@microsoft/live-share-react",
+    "version": "2.0.0-internal.10",
+    "description": "Build collaborative React apps using Microsoft's Fluid & Live Share frameworks with ease.",
+    "author": "Microsoft",
+    "license": "SEE LICENSE IN LICENSE",
+    "main": "./bin/cjs/index.js",
+    "module": "./bin/esm/index.js",
+    "types": "./bin/esm/index.d.ts",
+    "type": "module",
+    "scripts": {
+        "clean": "npx shx rm -rf bin",
+        "build": "node  ../../internal/build-tools/build-package.js --cjs --esm",
+        "typecheck": "tsc"
+    },
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "require": {
+                "types": "./bin/cjs/index.d.ts",
+                "default": "./bin/cjs/index.js"
+            },
+            "import": {
+                "types": "./bin/esm/index.d.ts",
+                "default": "./bin/esm/index.js"
+            }
+        }
+    },
+    "dependencies": {
+        "url": "^0.11.0",
+        "uuid": "^9.0.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.21.8",
+        "@microsoft/live-share": "2.0.0-internal.10",
+        "@microsoft/live-share-canvas": "2.0.0-internal.10",
+        "@microsoft/live-share-media": "2.0.0-internal.10",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "@types/uuid": "^9.0.1",
+        "babel-loader": "^9.1.2",
+        "fluid-framework": ">=2.40 <2.50",
+        "typescript": "~5.5.3"
+    },
+    "peerDependencies": {
+        "@microsoft/live-share": "2.0.0-internal.10",
+        "@microsoft/live-share-canvas": "2.0.0-internal.10",
+        "@microsoft/live-share-media": "2.0.0-internal.10",
+        "fluid-framework": ">=2.40 <2.50",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+    },
+    "repository": {
+        "directory": "packages/live-share-react",
+        "type": "git",
+        "url": "https://github.com/microsoft/live-share-sdk"
+    },
+    "homepage": "https://aka.ms/teamsliveshare",
+    "bugs": {
+        "url": "https://github.com/microsoft/live-share-sdk/issues"
+    }
+}

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from "./providers";
-export * from "./shared-hooks";
-export * from "./live-hooks";
-export * from "./types";
-export * from "./providers";
-export * from "./interfaces";
+export * from "./providers/index.js";
+export * from "./shared-hooks/index.js";
+export * from "./live-hooks/index.js";
+export * from "./types/index.js";
+export * from "./providers/index.js";
+export * from "./interfaces/index.js";

package/src/interfaces/index.ts

@@ -1 +1 @@
-export * from "./LiveInterfaceExtensions";
+export * from "./LiveInterfaceExtensions.js";

package/src/internal/index.ts

@@ -1,2 +1,2 @@
-export * from "./errors";
-export * from "./type-guards";
+export * from "./errors.js";
+export * from "./type-guards.js";

package/src/internal/type-guards.ts

@@ -1,4 +1,4 @@
-import { ITeamsJsSdkError } from "./errors";
+import { ITeamsJsSdkError } from "./errors.js";
 
 /**
  * @hidden

package/src/live-hooks/index.ts

@@ -1,7 +1,7 @@
-export * from "./useLivePresence";
-export * from "./useLiveFollowMode";
-export * from "./useLiveState";
-export * from "./useMediaSynchronizer";
-export * from "./useLiveEvent";
-export * from "./useLiveCanvas";
-export * from "./useLiveTimer";
+export * from "./useLivePresence.js";
+export * from "./useLiveFollowMode.js";
+export * from "./useLiveState.js";
+export * from "./useMediaSynchronizer.js";
+export * from "./useLiveEvent.js";
+export * from "./useLiveCanvas.js";
+export * from "./useLiveTimer.js";

package/src/live-hooks/useLiveCanvas.ts

@@ -3,18 +3,16 @@
  * Licensed under the Microsoft Live Share SDK License.
  */
 
-import {
-    CanvasReferencePoint,
-    IBrush,
-    InkingManager,
-    InkingTool,
-    IPoint,
-    LiveCanvas,
-} from "@microsoft/live-share-canvas";
+import { InkingManager, LiveCanvas } from "@microsoft/live-share-canvas";
 import React from "react";
-import { useDynamicDDS } from "../shared-hooks";
-import { IUseLiveCanvasResults } from "../types";
-import { isRefObject } from "../utils";
+import { useDynamicDDS } from "../shared-hooks/index.js";
+import {
+    IUseLiveCanvasOptionalProps,
+    IUseLiveCanvasResults,
+} from "../types/index.js";
+import { isRefObject } from "../utils/index.js";
+import { getRawNode } from "../shared-hooks/internals/tree-node-utils.js";
+import { LiveDataObjectInitializeState } from "@microsoft/live-share";
 
 /**
  * React hook for using a Live Share Canvas `LiveCanvas` and `InkingManager`.
@@ -26,27 +24,72 @@ import { isRefObject } from "../utils";
  *
  * @param uniqueKey the unique key for the `LiveCanvas`. If one does not yet exist, a new one.
  * @param canvasElementRef the HTML div element ref or document ID that `InkingManager` will use for canvas-based collaboration.
- * @param active Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
- * @param tool Optional. Stateful enum for what tool to use in the `InkingManager`.
- * @param lineBrush Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
- * @param offset Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
- * @param scale Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
- * @param referencePoint Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
- * @param isCursorShared Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
- * @param localUserPictureUrl Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
- * @returns IUseLiveCanvasResults object that contains the `liveCanvas` data object and `inkingManager`.
+ * @param props Optional. Other optional props.
+ * @param props.active Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
+ * @param props.tool Optional. Stateful enum for what tool to use in the `InkingManager`.
+ * @param props.lineBrush Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
+ * @param props.offset Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
+ * @param props.scale Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
+ * @param props.referencePoint Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
+ * @param props.isCursorShared Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
+ * @param props.localUserPictureUrl Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
+ * @param props.node Optional. A Fluid `LiveCanvasTree` `TreeNode` instance to swap out the underlying storage solution for strokes.
+ * To learn more, look at Fluid's [SharedTree](https://fluidframework.com/docs/data-structures/tree/) documentation.
+ * @param allowedRoles Optional. The user roles that are allowed to start/stop/pause the timer.
+ *
+ * @returns `IUseLiveCanvasResults` object that contains the `liveCanvas` data object and `inkingManager`.
+ * 
+ * @example
+ ```jsx
+import { useLiveCanvas } from "@microsoft/live-share-react";
+import { InkingTool } from "@microsoft/live-share-canvas";
+import { useRef } from "react";
+
+// Unique identifier that distinguishes this useLiveCanvas from others in your app
+const UNIQUE_KEY = "CUSTOM-LIVE-CANVAS";
+
+// Example component
+export function ExampleLiveCanvas() {
+    const liveCanvasRef = useRef(null);
+    const { liveCanvas, inkingManager } = useLiveCanvas(
+        "CUSTOM-LIVE-CANVAS",
+        liveCanvasRef,
+    );
+
+    return (
+        <div style={{ position: "absolute"}}>
+            <div
+                ref={liveCanvasRef}
+                // Best practice is to not define inline styles
+                style={{ width: "556px", height: "224px" }}
+            />
+            {!!liveCanvas && (
+                <div>
+                    <button
+                        onClick={() => {
+                            inkingManager.tool = InkingTool.pen;
+                        }}
+                    >
+                        {"Pen"}
+                    </button>
+                    <button
+                        onClick={() => {
+                            inkingManager.tool = InkingTool.laserPointer;
+                        }}
+                    >
+                        {"Laser pointer"}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+ ```
  */
 export function useLiveCanvas(
     uniqueKey: string,
     canvasElementRef: React.RefObject<HTMLElement | null> | string,
-    active?: boolean,
-    tool?: InkingTool,
-    lineBrush?: IBrush,
-    offset?: IPoint,
-    scale?: number,
-    referencePoint?: CanvasReferencePoint,
-    isCursorShared?: boolean,
-    localUserPictureUrl?: string
+    props?: IUseLiveCanvasOptionalProps
 ): IUseLiveCanvasResults {
     /**
      * User facing: inking manager instance
@@ -61,103 +104,132 @@ export function useLiveCanvas(
         LiveCanvas
     );
 
+    // This should change less frequently then node if they are using `useTreeNode`
+    // We need the raw node anyways to apply event listeners
+    const rawNode = getRawNode(props?.node);
+
     /**
      * Setup the InkingManager and LiveCanvas
      */
+    React.useEffect(
+        () => {
+            // if the component is already listening or liveCanvas is not yet initialized, return
+            if (!liveCanvas) return;
+            // get the canvas element from the ref or document
+            let htmlElement: HTMLElement | null;
+            if (isRefObject(canvasElementRef)) {
+                htmlElement = canvasElementRef.current;
+            } else {
+                htmlElement = document.getElementById(canvasElementRef);
+            }
+            if (htmlElement === null) return;
+            // Clear out existing nodes
+            function removeAllChildren(node: HTMLElement | ChildNode) {
+                node.childNodes.forEach((childNode) => {
+                    removeAllChildren(childNode);
+                    childNode.remove();
+                });
+            }
+            removeAllChildren(htmlElement);
+            // Create the InkingManager and initialize the liveCanvas with it
+            const inkingManager = new InkingManager(htmlElement);
+            setInkingManager(inkingManager);
+            liveCanvas.initialize(inkingManager, props?.allowedRoles, rawNode);
+
+            // cleanup function to be called when the component is unmount
+            return () => {
+                inkingManager.removeAllListeners();
+            };
+        },
+        // Intentionally ommitting rawNode from deps because we only want to initialize once,
+        // whereas rawNode may change many times.
+        [liveCanvas, props?.allowedRoles]
+    );
+
+    /**
+     * Set the node if it changes while LiveCanvas is initialized
+     */
     React.useEffect(() => {
-        // if the component is already listening or liveCanvas is not yet initialized, return
-        if (!liveCanvas) return;
-        // get the canvas element from the ref or document
-        let htmlElement: HTMLElement | null;
-        if (isRefObject(canvasElementRef)) {
-            htmlElement = canvasElementRef.current;
-        } else {
-            htmlElement = document.getElementById(canvasElementRef);
-        }
-        if (htmlElement === null) return;
-        // Create the InkingManager and initialize the liveCanvas with it
-        const inkingManager = new InkingManager(htmlElement);
-        setInkingManager(inkingManager);
-        liveCanvas.initialize(inkingManager);
-
-        // cleanup function to be called when the component is unmount
-        return () => {
-            // liveCanvas.dispose();
-            inkingManager.removeAllListeners();
-        };
-    }, [liveCanvas]);
+        if (
+            !rawNode ||
+            liveCanvas?.initializeState !==
+                LiveDataObjectInitializeState.succeeded
+        )
+            return;
+        liveCanvas.setTreeNode(rawNode);
+    }, [liveCanvas, rawNode]);
 
     /**
      * Activate or deactivate the inkingManager based on the 'active' prop
      */
     React.useEffect(() => {
-        if (inkingManager && active !== undefined) {
-            if (active) {
+        if (inkingManager && props?.active !== undefined) {
+            if (props?.active) {
                 inkingManager.activate();
             } else {
                 inkingManager.deactivate();
             }
         }
-    }, [active, inkingManager]);
+    }, [props?.active, inkingManager]);
 
     /**
      * Sets the tool of the inkingManager based on the 'tool' prop
      */
     React.useEffect(() => {
-        if (inkingManager && tool !== undefined) {
-            inkingManager.tool = tool;
+        if (inkingManager && props?.tool !== undefined) {
+            inkingManager.tool = props.tool;
         }
-    }, [tool, inkingManager]);
+    }, [props?.tool, inkingManager]);
 
     /**
      * Sets the offset of the inkingManager based on the 'offset' prop
      */
     React.useEffect(() => {
-        if (inkingManager && offset !== undefined) {
+        if (inkingManager && props?.offset !== undefined) {
             inkingManager.offset = {
-                x: offset.x,
-                y: offset.y,
+                x: props?.offset.x,
+                y: props?.offset.y,
             };
         }
-    }, [offset?.x, offset?.y, inkingManager]);
+    }, [props?.offset?.x, props?.offset?.y, inkingManager]);
 
     /**
      * Sets the scale of the inkingManager based on the 'scale' prop
      */
     React.useEffect(() => {
-        if (inkingManager && scale !== undefined) {
-            inkingManager.scale = scale;
+        if (inkingManager && props?.scale !== undefined) {
+            inkingManager.scale = props?.scale;
         }
-    }, [scale, inkingManager]);
+    }, [props?.scale, inkingManager]);
 
     /**
      * Sets the referencePoint of the inkingManager based on the 'referencePoint' prop
      */
     React.useEffect(() => {
-        if (inkingManager && referencePoint !== undefined) {
-            inkingManager.referencePoint = referencePoint;
+        if (inkingManager && props?.referencePoint !== undefined) {
+            inkingManager.referencePoint = props?.referencePoint;
         }
-    }, [referencePoint, inkingManager]);
+    }, [props?.referencePoint, inkingManager]);
 
     /**
      * Sets the lineBrush of the inkingManager based on the 'lineBrush' prop
      */
     React.useEffect(() => {
-        if (inkingManager && lineBrush) {
+        if (inkingManager && props?.lineBrush) {
             inkingManager.lineBrush = {
-                color: lineBrush.color,
-                tip: lineBrush.tip,
-                tipSize: lineBrush.tipSize,
-                type: lineBrush.type,
-                endArrow: lineBrush.endArrow,
+                color: props.lineBrush.color,
+                tip: props.lineBrush.tip,
+                tipSize: props.lineBrush.tipSize,
+                type: props.lineBrush.type,
+                endArrow: props.lineBrush.endArrow,
             };
         }
     }, [
-        lineBrush?.color,
-        lineBrush?.tip,
-        lineBrush?.tipSize,
-        lineBrush?.type,
-        lineBrush?.endArrow,
+        props?.lineBrush?.color,
+        props?.lineBrush?.tip,
+        props?.lineBrush?.tipSize,
+        props?.lineBrush?.type,
+        props?.lineBrush?.endArrow,
         inkingManager,
     ]);
 
@@ -165,21 +237,21 @@ export function useLiveCanvas(
      * Sets the isCursorShared of the liveCanvas based on the 'isCursorShared' prop
      */
     React.useEffect(() => {
-        if (liveCanvas && isCursorShared !== undefined) {
-            liveCanvas.isCursorShared = isCursorShared;
+        if (liveCanvas && props?.isCursorShared !== undefined) {
+            liveCanvas.isCursorShared = props.isCursorShared;
         }
-    }, [isCursorShared, liveCanvas]);
+    }, [props?.isCursorShared, liveCanvas]);
 
     /**
      * Sets the onGetLocalUserInfo method of the liveCanvas based on the 'localUserCursor' prop
      */
     React.useEffect(() => {
-        if (liveCanvas && localUserPictureUrl) {
+        if (liveCanvas && props?.localUserPictureUrl) {
             liveCanvas.onGetLocalUserPictureUrl = (): string | undefined => {
-                return localUserPictureUrl;
+                return props.localUserPictureUrl;
             };
         }
-    }, [localUserPictureUrl, liveCanvas]);
+    }, [props?.localUserPictureUrl, liveCanvas]);
 
     /**
      * Return hook response

package/src/live-hooks/useLiveEvent.ts

@@ -14,15 +14,15 @@ import {
     IUseLiveEventResults,
     OnReceivedLiveEventAction,
     SendLiveEventAction,
-} from "../types";
-import { IReceiveLiveEvent } from "../interfaces";
-import { useDynamicDDS } from "../shared-hooks";
+} from "../types/index.js";
+import { IReceiveLiveEvent } from "../interfaces/index.js";
+import { useDynamicDDS } from "../shared-hooks/index.js";
 import {
     ActionContainerNotJoinedError,
     ActionLiveDataObjectInitializedError,
     ActionLiveDataObjectUndefinedError,
-} from "../internal";
-import { useFluidObjectsContext } from "../providers";
+} from "../internal/index.js";
+import { useFluidObjectsContext } from "../providers/index.js";
 
 /**
  * React hook for using a Live Share `LiveEvent`.
@@ -38,6 +38,42 @@ import { useFluidObjectsContext } from "../providers";
  * @param allowedRoles Optional. The meeting roles eligible to send events through this object.
  * @param onReceivedEvent Optional. Callback method to be called when a new notification is received.
  * @returns stateful `latestEvent` & `allEvents` list, `sendEvent` callback, and the `liveEvent` object.
+ * 
+ * @example
+ ```jsx
+import { useLiveEvent } from "@microsoft/live-share-react";
+
+const emojis = ["❤️", "😂", "👍", "👎"];
+
+// Define a unique key that differentiates this usage of `useLiveEvent` from others in your app
+const MY_UNIQUE_KEY = "event-key";
+
+// Example component for using useLiveEvent
+export const MyCustomEvent = () => {
+  const { latestEvent, liveEvent, sendEvent } = useLiveEvent(MY_UNIQUE_KEY);
+
+  // Render loading UI when creating LiveEvent instance for first time
+  if (!liveEvent) return <>Loading...</>;
+
+  // Render UI
+  return (
+    <div>
+      {`Latest event: ${latestEvent?.value}, from local user: ${latestEvent?.local}`}
+      {"Select a planet below:"}
+      {emojis.map((emoji) => (
+        <button
+          key={emoji}
+          onClick={() => {
+            sendEvent(emoji);
+          }}
+        >
+          {emoji}
+        </button>
+      ))}
+    </div>
+  );
+};
+ ```
  */
 export function useLiveEvent<TEvent = any>(
     uniqueKey: string,
@@ -68,7 +104,7 @@ export function useLiveEvent<TEvent = any>(
      * User facing: callback to send event through `LiveEvent`
      */
     const sendEvent: SendLiveEventAction<TEvent> = React.useCallback(
-        async (event: TEvent) => {
+        async (event: TEvent, targetClientId?: string) => {
             if (!container) {
                 throw new ActionContainerNotJoinedError(
                     "liveEvent",
@@ -87,7 +123,7 @@ export function useLiveEvent<TEvent = any>(
                     "sendEvent"
                 );
             }
-            return await liveEvent.send(event);
+            return await liveEvent.send(event, targetClientId);
         },
         [container, liveEvent]
     );