Custom components annotation (#2403)

Annotate the custom components example with further explanation, fix a
typo

### 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 the custom components example.
This commit is contained in:
Taha 2024-01-10 14:29:17 +00:00 committed by GitHub
parent f7b612fa3d
commit e291dda27f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 1 deletions

View file

@ -1,6 +1,8 @@
import { Tldraw, TLEditorComponents } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
// There's a guide at the bottom of this file!
const components: TLEditorComponents = {
Brush: function MyBrush({ brush }) {
return (
@ -38,3 +40,10 @@ export default function CustomComponentsExample() {
</div>
)
}
/*
This example shows how to change the default components that tldraw uses on the canvas via the `components` prop.
Components include things like the background, the grid, handles, spinners etc. In this case we change the box
that appears when drag-selecting shapes, and the scribble left behind when using the eraser and laser pointer.
*/

View file

@ -7,6 +7,6 @@ Replace tldraw's on-canvas UI with your own.
---
Tldraw's on-canvas UI is build from replaceable React components.
Tldraw's on-canvas UI is built from replaceable React components.
Try dragging to select or using the eraser tool to see the custom components in this example.