Footer

Earlier we were using renderFooter prop to render custom footer which was removed in #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 be a valid React Node.

Usage

import { Excalidraw, Footer } from "@excalidraw/excalidraw";

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw>
        <Footer>
          <button
            className="custom-footer"
            onClick={() => alert("This is dummy footer")}
          >
            custom footer
          </button>
        </Footer>
      </Excalidraw>
    </div>
  );
}

This will only work for Desktop devices.

For mobile you will need to render it inside the MainMenu. You can use the useEditorInterface hook to check the type of device, this will be available only inside the children of Excalidraw component.

On mobile, open the Menu and you will see the custom footer rendered.

import {
  Excalidraw,
  Footer,
  useEditorInterface,
  MainMenu,
} from "@excalidraw/excalidraw";

const MobileFooter = ({}) => {
  const editorInterface = useEditorInterface();
  if (editorInterface.formFactor === "phone") {
    return (
      <Footer>
        <button
          className="custom-footer"
          style={{ marginLeft: "20px", height: "2rem" }}
          onClick={() => alert("This is custom footer in mobile menu")}
        >
          custom footer
        </button>
      </Footer>
    );
  }
  return null;
};

const App = () => (
  <div style={{ height: "400px" }}>
    <Excalidraw>
      <MainMenu>
        <MainMenu.Item> Item1 </MainMenu.Item>
        <MainMenu.Item> Item 2 </MainMenu.Item>
        <MobileFooter />
      </MainMenu>
    </Excalidraw>
  </div>
);