mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-11-08 06:44:23 +01:00
47cbb5b6fb
* refactor device to editor interface and derive styles panel * allow host app to control form factor and ui mode * add editor interface event listener * put new props inside UIOptions * refactor: move related apis into one file * expose getFormFactor * privatize the setting of desktop mode and fix snapshots * refactor and fix test * remove unimplemented code * export getFormFactor() * replace `getFormFactor` with `getEditorInterface` * remove dead & useless * comment * fix ts --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
69 lines
1.9 KiB
Plaintext
69 lines
1.9 KiB
Plaintext
# 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 be a valid React Node.
|
|
|
|
**Usage**
|
|
|
|
```jsx live
|
|
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](#mainmenu). You can use the [`useEditorInterface`](#useEditorInterface) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
|
|
|
|
Open the `Menu` in the below playground and you will see the `custom footer` rendered.
|
|
|
|
```jsx live noInline
|
|
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>
|
|
);
|
|
|
|
// Need to render when code is span across multiple components
|
|
// in Live Code blocks editor
|
|
render(<App />);
|
|
```
|