.github | ||
.husky | ||
.vscode | ||
electron | ||
example | ||
guides | ||
packages/tldraw | ||
vscode | ||
www | ||
.eslintignore | ||
.eslintrc | ||
.gitignore | ||
.npmignore | ||
.prettierrc | ||
card-repo.png | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
lerna.json | ||
LICENSE.md | ||
package.json | ||
README.md | ||
setupTests.ts | ||
tsconfig.base.json | ||
tsconfig.json | ||
yarn.lock |
@tldraw/tldraw
This package contains the tldraw editor as a React component named <Tldraw>
. You can use this package to embed the editor in any React application.
💕 Love this library? Consider becoming a sponsor.
🙌 Questions? Join the Discord channel or start a discussion.
🎨 Want to build your own tldraw-ish app instead? Try @tldraw/core.
Installation
Use your package manager of choice to install @tldraw/tldraw
and its peer dependencies.
yarn add @tldraw/tldraw
# or
npm i @tldraw/tldraw
Usage
Import the tldraw
React component and use it in your app.
import { Tldraw } from '@tldraw/tldraw'
function App() {
return <Tldraw />
}
Persisting the State
You can use the id
to persist the state in a user's browser storage.
import { Tldraw } from '@tldraw/tldraw'
function App() {
return <Tldraw id="myState" />
}
Controlling the Component through Props
You can control the <Tldraw/>
component through its props.
import { Tldraw, TDDocument } from '@tldraw/tldraw'
function App() {
const myDocument: TDDocument = {}
return <Tldraw document={document} />
}
Controlling the Component through the tldrawApp API
You can also control the <Tldraw/>
component imperatively through the TldrawApp
API.
import { Tldraw, tldrawApp } from '@tldraw/tldraw'
function App() {
const handleMount = React.useCallback((app: TldrawApp) => {
app.selectAll()
}, [])
return <Tldraw onMount={handleMount} />
}
Internally, the <Tldraw/>
component's user interface uses this API to make changes to the component's state. See the tldrawApp
section of the documentation for more on this API.
Responding to Changes
You can respond to changes and user actions using the onChange
callback. For more specific changes, you can also use the onPatch
, onCommand
, or onPersist
callbacks. See the documentation for more.
import { Tldraw, TldrawApp } from '@tldraw/tldraw'
function App() {
const handleChange = React.useCallback((app: TldrawApp, reason: string) => {
// Do something with the change
}, [])
return <Tldraw onMount={handleMount} />
}
Documentation
See the project's documentation.
Contribution
See the contributing guide.
Development
See the development guide.
Example
See the example
folder for examples of how to use the <Tldraw/>
component.
Community
Support
Need help? Please open an issue for support.
Discussion
Want to connect with other devs? Visit the Discord channel.
License
This project is licensed under MIT.
If you're using the library in a commercial product, please consider becoming a sponsor.