Hidden UI components
Custom UI components can be hidden providing a null
as the value for a component in `components In this case, all configurable UI components are hidden.
import { TLUiComponents, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
// The type here is include only to ensure this example contains all possible ui components,
const components: Required<TLUiComponents> = {
ContextMenu: null,
ActionsMenu: null,
HelpMenu: null,
ZoomMenu: null,
MainMenu: null,
Minimap: null,
StylePanel: null,
PageMenu: null,
NavigationPanel: null,
Toolbar: null,
KeyboardShortcutsDialog: null,
QuickActions: null,
HelperButtons: null,
DebugPanel: null,
DebugMenu: null,
SharePanel: null,
MenuPanel: null,
TopPanel: null,
CursorChatBubble: null,
}
export default function UiComponentsHiddenExample() {
return (
<div className="tldraw__editor">
<Tldraw components={components} />
</div>
)
}
Is this page helpful?
Prev
External UI (Context)Next
Hide UI