docs: excalidraw package usage example tweaks (#2608)

Co-authored-by: Aakansha Doshi <monstershome@gmail.com>

src/packages/excalidraw/README.md

@@ -39,26 +39,19 @@ import "./styles.css";
 export default function App() {
   const excalidrawRef = createRef();
 
-  const onChange = (elements, state) => {
-    console.log(excalidrawRef.current);
-    console.log("Elements :", elements, "State : ", state);
-  };
-
   const [dimensions, setDimensions] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
   });
 
-  const onResize = () => {
-    setDimensions({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-  };
-
   useEffect(() => {
+    const onResize = () => {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
     window.addEventListener("resize", onResize);
-
     return () => window.removeEventListener("resize", onResize);
   }, []);
 
@@ -94,7 +87,6 @@ export default function App() {
     excalidrawRef.current.updateScene(sceneData);
   };
 
-  const { width, height } = dimensions;
   return (
     <div className="App">
       <button className="update-scene" onClick={updateScene}>
@@ -111,12 +103,17 @@ export default function App() {
       <div className="excalidraw-wrapper">
         <Excalidraw
           ref={excalidrawRef}
-          width={width}
-          height={height}
+          width={dimensions.width}
+          height={dimensions.height}
           initialData={InitialData}
-          onChange={onChange}
+          onChange={(elements, state) => {
+            console.log("Latest elements:", elements, "Latest state:", state);
+          }}
           user={{ name: "Excalidraw User" }}
-          onPointerUpdate={(payload) => console.log(payload)}
+          onPointerUpdate={(pointerData) => console.log(pointerData)}
+          onCollabButtonClick={() => {
+            window.alert("You clicked on collab button");
+          }}
         />
       </div>
     </div>