improvement(excalidraw_wrapper.tsx): remove 'onResize' callback (#22)

It will be host app's responsiblity to add the listener  forr resize
Remove npm downloads weekly badge

Author: ad1992

README.md

@@ -1,7 +1,6 @@
 ### Excalidraw
 
 ![npm](https://img.shields.io/npm/v/excalidraw)
-![npm](https://img.shields.io/npm/dw/excalidraw)
 ![npm](https://img.shields.io/npm/dt/excalidraw)
 
 Excalidraw exported as a component to directly embed in your projects
@@ -34,7 +33,7 @@ FG_Virgil.woff2
 ### Usage
 
 ```javascript
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Excalidraw from "excalidraw";
 import InitialData from "./initialData";
 
@@ -46,37 +45,42 @@ export default function App() {
     console.log("Elements :", elements, "State : ", state);
   };
 
-  const onUsernameChange = (username) => {
+  const onUsernameChange = username => {
     console.log("current username", username);
   };
   const [dimensions, setDimensions] = useState({
     width: window.innerWidth,
-    height: window.innerHeight,
+    height: window.innerHeight
   });
 
   const onResize = () => {
     setDimensions({
       width: window.innerWidth,
-      height: window.innerHeight,
+      height: window.innerHeight
     });
   };
+
+  useEffect(() => {
+    window.addEventListener("resize", onResize);
+
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
   const { width, height } = dimensions;
-  const options = { zenModeEnabled: true, viewBackgroundColor: "AFEEEE" };
+  const options = { zenModeEnabled: true, viewBackgroundColor: "#AFEEEE" };
   return (
     <div className="App">
       <Excalidraw
         width={width}
         height={height}
-        onResize={onResize}
         initialData={InitialData}
         onChange={onChange}
-        options={options}
         user={{ name: "Excalidraw User" }}
         onUsernameChange={onUsernameChange}
+        options={options}
       />
     </div>
   );
-}
 ```
 
 [![Edit excalidraw-embed](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-embed-f60f8?fontsize=14&hidenavigation=1&theme=dark)
@@ -87,7 +91,6 @@ export default function App() {
 | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [width](#width)                       | Number                                                                                                                                       | window.innerWidth                                                                 | The width of Excalidraw component                                                                                                                          |
 | [height](#height)                     | Number                                                                                                                                       | window.innerHeight                                                                | The height of Excalidraw component                                                                                                                         |
-| [onResize](#onResize)                 | Function                                                                                                                                     |                                                                                   | This callback will be called when window resizes                                                                                                           |
 | [initialData](#initialData)           | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw-embed/blob/58178c388ae577140a1c679b5733f33e3722498a/src/element/types.ts#L44) | []                                                                                | The initial data with which app loads.                                                                                                                     |
 | [onChange](#onChange)                 | Function                                                                                                                                     |                                                                                   | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw elements and the current app state. |
 | [options](#options)                   | Object                                                                                                                                       | Each option has a default value. See [options](#options) section for more details | Options to be passed to Excalidraw                                                                                                                         |
@@ -106,12 +109,6 @@ This props defines the width of the Excalidraw component. Defaults to `window.in
 
 This props defines the height of the Excalidraw component. Defaults to `window.innerHeight` if not passed.
 
-<a name="onResize"><a/>
-
-##### onResize
-
-If this callback is passed, it gets triggered when window resizes. Some calculations which you might want to do here is calculating width and height of Excalidraw and pass it. Incase the updated width and height is not passed, then it will not get updated.
-
 <a name="initialData"><a/>
 
 ##### initialData

package.json

@@ -1,6 +1,6 @@
 {
   "name": "excalidraw",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/excalidraw.min.js",
   "files": [
     "dist"

src/components/App.tsx

@@ -448,10 +448,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   }
 
   private onResize = withBatchedUpdates(() => {
-    const { onResize } = this.props;
-    if (onResize) {
-      onResize();
-    }
     globalSceneState
       .getElementsIncludingDeleted()
       .forEach((element) => invalidateShapeForElement(element));

src/excalidraw_wrapper.tsx

@@ -17,7 +17,6 @@ const Excalidraw = (props: ExcalidrawProps) => {
     initialData,
     user,
     onUsernameChange,
-    onResize,
     options,
   } = props;
   useEffect(() => {
@@ -45,7 +44,6 @@ const Excalidraw = (props: ExcalidrawProps) => {
       initialData={initialData}
       user={user}
       onUsernameChange={onUsernameChange}
-      onResize={onResize}
       options={options}
     />
   );

src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import * as Sentry from "@sentry/browser";
 import * as SentryIntegrations from "@sentry/integrations";
@@ -71,6 +71,12 @@ function ExcalidrawApp() {
     });
   };
 
+  useEffect(() => {
+    window.addEventListener("resize", onResize);
+
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
   const saveDebounced = debounce((elements, state) => {
     saveToLocalStorage(elements, state);
   }, 300);
@@ -99,7 +105,6 @@ function ExcalidrawApp() {
           initialData={initialData}
           user={user}
           onUsernameChange={onUsernameChange}
-          onResize={onResize}
         />
       </IsMobileProvider>
     </TopErrorBoundary>

src/types.ts

@@ -113,7 +113,6 @@ export interface ExcalidrawProps {
     name?: string | null | undefined;
   };
   onUsernameChange?: (username: string) => void;
-  onResize: () => void;
   options: {
     zenModeEnabled: boolean;
     viewBackgroundColor: string;