Render Props

renderTopRightUI

(isMobile: boolean, appState:AppState) => JSX | null

A function returning JSX to render custom UI in the top right corner of the app.

Live Editor

function App() { return ( <div style={{ height: "500px" }}> <Excalidraw renderTopRightUI={() => { return ( <button style={{ background: "#70b1ec", border: "none", color: "#fff", width: "max-content", fontWeight: "bold", }} onClick={() => window.alert("This is dummy top right UI")} > Click me </button> ); }} /> </div> ); }

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw
        renderTopRightUI={() => {
          return (
            <button
              style={{
                background: "#70b1ec",
                border: "none",
                color: "#fff",
                width: "max-content",
                fontWeight: "bold",
              }}
              onClick={() => window.alert("This is dummy top right UI")}
            >
              Click me
            </button>
          );
        }}
      />
    </div>
  );
}

Result

Loading...

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 as do in excalidraw.com.

Live Editor

function App() { return ( <div style={{ height: "500px" }}> <Excalidraw renderCustomStats={() => ( <p style={{ color: "#70b1ec", fontWeight: "bold" }}> Dummy stats will be shown here </p> )} /> </div> ); }

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw
        renderCustomStats={() => (
          <p style={{ color: "#70b1ec", fontWeight: "bold" }}>
            Dummy stats will be shown here
          </p>
        )}
      />
    </div>
  );
}

Result

Loading...

renderEmbeddable

(element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null

Allows you to replace the renderer for embeddable elements (which renders <iframe> elements).

Parameter	Type	Description
element	NonDeleted<ExcalidrawEmbeddableElement>	The embeddable element to be rendered.
appState	AppState	The current state of the UI.