Annotate api example (#2395)
Annotates the API example, updates from calling it app to calling it editor. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Annotate API example
This commit is contained in:
parent
6b1005ef71
commit
05a2751eb6
1 changed files with 28 additions and 10 deletions
|
@ -10,13 +10,9 @@ import {
|
|||
import '@tldraw/tldraw/tldraw.css'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
// The tldraw component shares its App instance via its onMount callback prop.
|
||||
|
||||
// The App instance is tldraw's "god object". You can use the app to do
|
||||
// just about everything that's possible in tldraw. Internally, the canvas
|
||||
// component and all shapes, tools, and UI components use this instance to
|
||||
// send events, observe changes, and perform actions.
|
||||
// There's a guide at the bottom of this file!
|
||||
|
||||
//[1]
|
||||
export default function APIExample() {
|
||||
const handleMount = (editor: Editor) => {
|
||||
// Create a shape id
|
||||
|
@ -77,10 +73,7 @@ export default function APIExample() {
|
|||
)
|
||||
}
|
||||
|
||||
// Another (sneakier) way to access the current app is through React context.
|
||||
// The Tldraw component provides the context, so you can add children to
|
||||
// the component and access the app through the useEditor hook.
|
||||
|
||||
//[2]
|
||||
const InsideOfEditorContext = () => {
|
||||
const editor = useEditor()
|
||||
|
||||
|
@ -103,3 +96,28 @@ const InsideOfEditorContext = () => {
|
|||
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Introduction:
|
||||
|
||||
This example shows how to use the tldraw editor instance to make changes
|
||||
to the canvas. The editor instance is tldraw's "god object". You can use
|
||||
the app to do just about everything that's possible in tldraw. Internally,
|
||||
the canvas component and all shapes, tools, and UI components use this instance
|
||||
to send events, observe changes, and perform actions.
|
||||
|
||||
There are two main ways to use the editor:
|
||||
|
||||
[1]
|
||||
The tldraw component shares its editor instance via its onMount callback prop.
|
||||
When you define a function for the onMount callback, it receives the editor
|
||||
instance as an argument. You can use this to manipulate the canvas.
|
||||
|
||||
|
||||
[2]
|
||||
Another (sneakier) way to access the current app is through React context.
|
||||
The Tldraw component provides the context, so you can add children to
|
||||
the component and access the app through the useEditor hook. This is cool.
|
||||
|
||||
*/
|
Loading…
Reference in a new issue