import { useState } from 'react' import { stopEventPropagation, Tldraw, TLEditorComponents, track, useEditor } from 'tldraw' import 'tldraw/tldraw.css' // There's a guide at the bottom of this file! // [1] function MyComponent() { const [state, setState] = useState(0) return ( <>

The count is {state}!

These components are on the canvas. They will scale with camera zoom like shapes.

The count is {state}!

Create and select a shape to see the in front of the canvas component

) } //[2] const MyComponentInFront = track(() => { const editor = useEditor() const selectionRotatedPageBounds = editor.getSelectionRotatedPageBounds() if (!selectionRotatedPageBounds) return null const pageCoordinates = editor.pageToViewport(selectionRotatedPageBounds.point) return (

This won't scale with zoom.

) }) // [3] const components: TLEditorComponents = { OnTheCanvas: MyComponent, InFrontOfTheCanvas: MyComponentInFront, } // [4] export default function OnTheCanvasExample() { return (

) } /* This example shows how you can use the onTheCanvas and inFrontOfTheCanvas components. onTheCanvas components will behave similarly to shapes, they will scale with the zoom and move when the page is panned. inFrontOfTheCanvas components don't scale with the zoom, but still move when the page is panned. For another example that shows how to customize components, check out the custom components example. To have a component that ignores the camera entirely, you should check out the custom UI example. [1] This is our onTheCanvas component. We also stop event propagation on the pointer events so that we don't accidentally select shapes when interacting with the component. [2] This is our inFrontOfTheCanvas component. We want to render this next to a selected shape, so we need to make sure it's reactive to changes in the editor. We use the track function to make sure the component is re-rendered whenever the selection changes. Check out the Signia docs for more info: https://signia.tldraw.dev/docs/API/signia_react/functions/track Using the editor instance we can get the bounds of the selection box and convert them to screen coordinates. We then render the component at those coordinates. [3] This is where we define the object that will be passed to the Tldraw component prop. [4] This is where we render the Tldraw component. Let's pass the components object to the components prop. */

Things on the canvas