feat: render footer as a component instead of render prop

src/components/App.tsx

@@ -474,12 +474,8 @@ class App extends React.Component<AppProps, AppState> {
       this.scene.getNonDeletedElements(),
       this.state,
     );
-    const {
+    const { onCollabButtonClick, renderTopRightUI, renderCustomStats } =
-      onCollabButtonClick,
+      this.props;
-      renderTopRightUI,
-      renderFooter,
-      renderCustomStats,
-    } = this.props;
 
     return (
       <div
@@ -520,7 +516,6 @@ class App extends React.Component<AppProps, AppState> {
               langCode={getLanguage().code}
               isCollaborating={this.props.isCollaborating}
               renderTopRightUI={renderTopRightUI}
-              renderCustomFooter={renderFooter}
               renderCustomStats={renderCustomStats}
               viewModeEnabled={viewModeEnabled}
               showExitZenModeBtn={
@@ -537,7 +532,9 @@ class App extends React.Component<AppProps, AppState> {
               library={this.library}
               id={this.id}
               onImageAction={this.onImageAction}
-            />
+            >
+              {this.props.children}
+            </LayerUI>
             <div className="excalidraw-textEditorContainer" />
             <div className="excalidraw-contextMenuContainer" />
             {selectedElement.length === 1 && this.state.showHyperlinkPopup && (

src/components/LayerUI.tsx

@@ -58,7 +58,6 @@ interface LayerUIProps {
   langCode: Language["code"];
   isCollaborating: boolean;
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
-  renderCustomFooter?: ExcalidrawProps["renderFooter"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -67,6 +66,7 @@ interface LayerUIProps {
   library: Library;
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
+  children?: React.ReactNode;
 }
 const LayerUI = ({
   actionManager,
@@ -85,7 +85,6 @@ const LayerUI = ({
   toggleZenMode,
   isCollaborating,
   renderTopRightUI,
-  renderCustomFooter,
   renderCustomStats,
   viewModeEnabled,
   libraryReturnUrl,
@@ -94,6 +93,7 @@ const LayerUI = ({
   library,
   id,
   onImageAction,
+  children,
 }: LayerUIProps) => {
   const device = useDevice();
 
@@ -454,7 +454,7 @@ const LayerUI = ({
             },
           )}
         >
-          {renderCustomFooter?.(false, appState)}
+          {children}
         </div>
         <div
           className={clsx(
@@ -542,7 +542,6 @@ const LayerUI = ({
         onPenModeToggle={onPenModeToggle}
         canvas={canvas}
         isCollaborating={isCollaborating}
-        renderCustomFooter={renderCustomFooter}
         viewModeEnabled={viewModeEnabled}
         showThemeBtn={showThemeBtn}
         onImageAction={onImageAction}
@@ -606,7 +605,6 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
 
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
   return (
-    prev.renderCustomFooter === next.renderCustomFooter &&
     prev.langCode === next.langCode &&
     prev.elements === next.elements &&
     prev.files === next.files &&

src/excalidraw-app/components/Footer.tsx

@@ -0,0 +1,79 @@
+import { isExcalidrawPlusSignedUser, PlusAppLinkJSX, PlusLPLinkJSX } from "..";
+import { shield } from "../../components/icons";
+import { Tooltip } from "../../components/Tooltip";
+import { t } from "../../i18n";
+import { languages } from "../../packages/excalidraw/index";
+import { LanguageList } from "./LanguageList";
+
+const EncryptedIcon = () => (
+  <a
+    className="encrypted-icon tooltip"
+    href="https://blog.excalidraw.com/end-to-end-encryption/"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label={t("encrypted.link")}
+  >
+    <Tooltip label={t("encrypted.tooltip")} long={true}>
+      {shield}
+    </Tooltip>
+  </a>
+);
+
+const Footer = ({
+  isMobile,
+  langCode,
+  onLangChange,
+}: {
+  isMobile: boolean;
+  langCode: string;
+  onLangChange: (langCode: string) => void;
+}) => {
+  if (isMobile) {
+    const isTinyDevice = window.innerWidth < 362;
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: isTinyDevice ? "column" : "row",
+        }}
+      >
+        <fieldset>
+          <legend>{t("labels.language")}</legend>
+          <LanguageList
+            onChange={onLangChange}
+            languages={languages}
+            currentLangCode={langCode}
+          />
+        </fieldset>
+        {/* FIXME remove after 2021-05-20 */}
+        <div
+          style={{
+            width: "24ch",
+            fontSize: "0.7em",
+            textAlign: "center",
+            marginTop: isTinyDevice ? 16 : undefined,
+            marginLeft: "auto",
+            marginRight: isTinyDevice ? "auto" : undefined,
+            padding: isExcalidrawPlusSignedUser ? undefined : "4px 2px",
+            border: isExcalidrawPlusSignedUser ? undefined : "1px dashed #aaa",
+            borderRadius: 12,
+          }}
+        >
+          {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <>
+      <EncryptedIcon />
+      <LanguageList
+        onChange={onLangChange}
+        languages={languages}
+        currentLangCode={langCode}
+      />
+    </>
+  );
+};
+
+export default Footer;

src/excalidraw-app/index.tsx

@@ -19,11 +19,7 @@ import {
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import {
+import { Excalidraw, defaultLang } from "../packages/excalidraw/index";
-  Excalidraw,
-  defaultLang,
-  languages,
-} from "../packages/excalidraw/index";
 import {
   AppState,
   LibraryItems,
@@ -51,7 +47,6 @@ import Collab, {
   collabDialogShownAtom,
   isCollaboratingAtom,
 } from "./collab/Collab";
-import { LanguageList } from "./components/LanguageList";
 import {
   exportToBackend,
   getCollaborationLinkData,
@@ -65,8 +60,6 @@ import {
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
 import { restore, restoreAppState, RestoredDataState } from "../data/restore";
-import { Tooltip } from "../components/Tooltip";
-import { shield } from "../components/icons";
 
 import "./index.scss";
 import { ExportToExcalidrawPlus } from "./components/ExportToExcalidrawPlus";
@@ -82,8 +75,9 @@ import { Provider, useAtom } from "jotai";
 import { jotaiStore, useAtomWithInitialValue } from "../jotai";
 import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
+import Footer from "./components/Footer";
 
-const isExcalidrawPlusSignedUser = document.cookie.includes(
+export const isExcalidrawPlusSignedUser = document.cookie.includes(
   COOKIES.AUTH_STATE_COOKIE,
 );
 
@@ -197,7 +191,7 @@ const initializeScene = async (opts: {
   return { scene: null, isExternalScene: false };
 };
 
-const PlusLPLinkJSX = (
+export const PlusLPLinkJSX = (
   <p style={{ direction: "ltr", unicodeBidi: "embed" }}>
     Introducing Excalidraw+
     <br />
@@ -211,7 +205,7 @@ const PlusLPLinkJSX = (
   </p>
 );
 
-const PlusAppLinkJSX = (
+export const PlusAppLinkJSX = (
   <a
     href={`${process.env.REACT_APP_PLUS_APP}/#excalidraw-redirect`}
     target="_blank"
@@ -588,73 +582,6 @@ const ExcalidrawWrapper = () => {
     [],
   );
 
-  const renderFooter = useCallback(
-    (isMobile: boolean) => {
-      const renderEncryptedIcon = () => (
-        <a
-          className="encrypted-icon tooltip"
-          href="https://blog.excalidraw.com/end-to-end-encryption/"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label={t("encrypted.link")}
-        >
-          <Tooltip label={t("encrypted.tooltip")} long={true}>
-            {shield}
-          </Tooltip>
-        </a>
-      );
-
-      const renderLanguageList = () => (
-        <LanguageList
-          onChange={(langCode) => setLangCode(langCode)}
-          languages={languages}
-          currentLangCode={langCode}
-        />
-      );
-      if (isMobile) {
-        const isTinyDevice = window.innerWidth < 362;
-        return (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: isTinyDevice ? "column" : "row",
-            }}
-          >
-            <fieldset>
-              <legend>{t("labels.language")}</legend>
-              {renderLanguageList()}
-            </fieldset>
-            {/* FIXME remove after 2021-05-20 */}
-            <div
-              style={{
-                width: "24ch",
-                fontSize: "0.7em",
-                textAlign: "center",
-                marginTop: isTinyDevice ? 16 : undefined,
-                marginLeft: "auto",
-                marginRight: isTinyDevice ? "auto" : undefined,
-                padding: isExcalidrawPlusSignedUser ? undefined : "4px 2px",
-                border: isExcalidrawPlusSignedUser
-                  ? undefined
-                  : "1px dashed #aaa",
-                borderRadius: 12,
-              }}
-            >
-              {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
-            </div>
-          </div>
-        );
-      }
-      return (
-        <>
-          {renderEncryptedIcon()}
-          {renderLanguageList()}
-        </>
-      );
-    },
-    [langCode],
-  );
-
   const renderCustomStats = () => {
     return (
       <CustomStats
@@ -710,14 +637,19 @@ const ExcalidrawWrapper = () => {
           },
         }}
         renderTopRightUI={renderTopRightUI}
-        renderFooter={renderFooter}
         langCode={langCode}
         renderCustomStats={renderCustomStats}
         detectScroll={false}
         handleKeyboardGlobally={true}
         onLibraryChange={onLibraryChange}
         autoFocus={true}
+      >
+        <Footer
+          isMobile={false}
+          langCode={langCode}
+          onLangChange={(langCode) => setLangCode(langCode)}
         />
+      </Excalidraw>
       {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (
         <ErrorDialog

src/packages/excalidraw/example/App.tsx

@@ -654,11 +654,12 @@ export default function App() {
             name="Custom name of drawing"
             UIOptions={{ canvasActions: { loadScene: false } }}
             renderTopRightUI={renderTopRightUI}
-            renderFooter={renderFooter}
             onLinkOpen={onLinkOpen}
             onPointerDown={onPointerDown}
             onScrollChange={rerenderCommentIcons}
-          />
+          >
+            {renderFooter()}
+          </Excalidraw>
           {Object.keys(commentIcons || []).length > 0 && renderCommentIcons()}
           {comment && renderComment()}
         </div>

src/packages/excalidraw/index.tsx

@@ -21,7 +21,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     isCollaborating = false,
     onPointerUpdate,
     renderTopRightUI,
-    renderFooter,
     langCode = defaultLang.code,
     viewModeEnabled,
     zenModeEnabled,
@@ -39,6 +38,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     onLinkOpen,
     onPointerDown,
     onScrollChange,
+    children,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -86,7 +86,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           isCollaborating={isCollaborating}
           onPointerUpdate={onPointerUpdate}
           renderTopRightUI={renderTopRightUI}
-          renderFooter={renderFooter}
           langCode={langCode}
           viewModeEnabled={viewModeEnabled}
           zenModeEnabled={zenModeEnabled}
@@ -105,7 +104,9 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onLinkOpen={onLinkOpen}
           onPointerDown={onPointerDown}
           onScrollChange={onScrollChange}
-        />
+        >
+          {children}
+        </App>
       </Provider>
     </InitializeApp>
   );

src/types.ts

@@ -280,7 +280,6 @@ export interface ExcalidrawProps {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
-  renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
   langCode?: Language["code"];
   viewModeEnabled?: boolean;
   zenModeEnabled?: boolean;
@@ -312,6 +311,7 @@ export interface ExcalidrawProps {
     pointerDownState: PointerDownState,
   ) => void;
   onScrollChange?: (scrollX: number, scrollY: number) => void;
+  children?: React.ReactNode;
 }
 
 export type SceneData = {