Custom quick actions
You can customize tldraw's quick actions, a collection of components that appear next to the menu button, or in the toolbar on smaller sizes.
The quick actions component can be customized by providing a QuickActionsContent component to the Tldraw component's components prop. If you provide null, then that component will be hidden.
import {
DefaultQuickActions,
DefaultQuickActionsContent,
TLComponents,
Tldraw,
TldrawUiMenuItem,
} from 'tldraw'
import 'tldraw/tldraw.css'
function CustomQuickActions() {
return (
<DefaultQuickActions>
<DefaultQuickActionsContent />
<div style={{ backgroundColor: 'thistle' }}>
<TldrawUiMenuItem id="code" icon="code" onSelect={() => window.alert('code')} />
</div>
</DefaultQuickActions>
)
}
const components: TLComponents = {
QuickActions: CustomQuickActions, // null will hide the page menu instead
}
export default function CustomQuickActionsExample() {
return (
<div className="tldraw__editor">
<Tldraw components={components} />
</div>
)
}