@dwelle/excalidraw 0.4.0-532db6e → 0.4.0-587f6c0

package/CHANGELOG.md

@@ -13,6 +13,14 @@ Please add the latest change on the top under the correct section.
 
 ## Unreleased
 
+### Features
+
+- Render Footer as a component instead of render prop [#5970](https://github.com/excalidraw/excalidraw/pull/5970). You can read more about its usage [here](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#Footer)
+
+#### BREAKING CHANGE
+
+- With this change, the prop `renderFooter` is now removed.
+
 ### Excalidraw schema
 
 - Merged `appState.currentItemStrokeSharpness` and `appState.currentItemLinearStrokeSharpness` into `appState.currentItemRoundness`. Renamed `changeSharpness` action to `changeRoundness`. Excalidraw element's `strokeSharpness` was changed to `roundness`. Check the PR for types and more details [#5553](https://github.com/excalidraw/excalidraw/pull/5553).

package/README.md

@@ -380,6 +380,31 @@ For a complete list of variables, check [theme.scss](https://github.com/excalidr
 
 No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx).
 
+### Component API
+
+#### Footer
+
+Earlier we were using `renderFooter` prop to render custom footer which was removed in [#5970](https://github.com/excalidraw/excalidraw/pull/5970). Now you can pass a `Footer` component instead to render the custom UI for footer.
+
+You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should a valid React Node.
+
+**Usage**
+
+```js
+import { Footer } from "@excalidraw/excalidraw";
+
+const CustomFooter = () => <button> custom button</button>;
+const App = () => {
+  return (
+    <Excalidraw>
+      <Footer>
+        <CustomFooter />
+      </Footer>
+    </Excalidraw>
+  );
+};
+```
+
 ### Props
 
 | Name | Type | Default | Description |
@@ -392,7 +417,6 @@ No, Excalidraw package doesn't come with collaboration built in, since the imple
 | [`onPointerUpdate`](#onPointerUpdate) | Function |  | Callback triggered when mouse pointer is updated. |
 | [`langCode`](#langCode) | string | `en` | Language code string |
 | [`renderTopRightUI`](#renderTopRightUI) | Function |  | Function that renders custom UI in top right corner |
-| [`renderFooter `](#renderFooter) | Function |  | Function that renders custom UI footer |
 | [`renderCustomStats`](#renderCustomStats) | Function |  | Function that can be used to render custom stats on the stats dialog. |
 | [`renderSIdebar`](#renderSIdebar) | Function |  | Render function that renders custom sidebar. |
 | [`viewModeEnabled`](#viewModeEnabled) | boolean |  | This implies if the app is in view mode. |
@@ -613,14 +637,6 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
 
 A function returning JSX to render custom UI in the top right corner of the app.
 
-#### `renderFooter`
-
-<pre>
-(isMobile: boolean, appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L79">AppState</a>) => JSX | null
-</pre>
-
-A function returning JSX to render custom UI footer. For example, you can use this to render a language picker that was previously being rendered by Excalidraw itself (for now, you'll need to implement your own language picker).
-
 #### `renderCustomStats`
 
 A function that can be used to render custom stats (returns JSX) in the nerd stats dialog. For example you can use this prop to render the size of the elements in the storage.