No description
Find a file
2021-11-11 12:16:10 +00:00
.github Updates to new core. (#210) 2021-10-28 17:50:58 +01:00
.husky [mega-chore] renaming (#223) 2021-11-06 11:16:30 +00:00
.vscode big refactor 2021-09-13 16:38:42 +01:00
electron v0.1.13 2021-11-11 12:16:10 +00:00
example v0.1.13 2021-11-11 12:16:10 +00:00
guides updates docs / readmes / adds contributor guide 2021-11-11 12:11:21 +00:00
packages/tldraw v0.1.13 2021-11-11 12:16:10 +00:00
vscode v0.1.13 2021-11-11 12:16:10 +00:00
www v0.1.13 2021-11-11 12:16:10 +00:00
.eslintignore Prepare for Publishing VS Code Extension (#227) 2021-11-10 15:35:51 +00:00
.eslintrc Prepare for Publishing VS Code Extension (#227) 2021-11-10 15:35:51 +00:00
.gitignore [improvement] Migrations (#217) 2021-11-04 15:48:39 +00:00
.npmignore Replace 2021-08-10 17:12:55 +01:00
.prettierrc Prepare for Publishing VS Code Extension (#227) 2021-11-10 15:35:51 +00:00
card-repo.png [improvement] repo shuffle (#214) 2021-11-02 11:46:25 +00:00
CHANGELOG.md changelog 2021-11-11 11:41:04 +00:00
CODE_OF_CONDUCT.md updates docs / readmes / adds contributor guide 2021-11-11 12:11:21 +00:00
CONTRIBUTING.md updates docs / readmes / adds contributor guide 2021-11-11 12:11:21 +00:00
lerna.json v0.1.13 2021-11-11 12:16:10 +00:00
LICENSE.md [improvement] UI (#215) 2021-11-03 16:46:33 +00:00
package.json Prepare for Publishing VS Code Extension (#227) 2021-11-10 15:35:51 +00:00
README.md updates docs / readmes / adds contributor guide 2021-11-11 12:11:21 +00:00
setupTests.ts Adjusts small example, makes inputs unique to each instance 2021-09-08 17:18:43 +01:00
tsconfig.base.json [fix] rotate center (#213) 2021-10-30 10:04:33 +01:00
tsconfig.json Remove libraries 2021-11-01 15:26:44 +00:00
yarn.lock bump 2021-11-11 09:56:21 +00:00

@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.

🎨 Want to build your own TLDraw-ish app instead? Try @tldraw/core.

💕 Love this library? Consider becoming a sponsor.

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, TLDrawDocument } from '@tldraw/tldraw'

function App() {
  const myDocument: TLDrawDocument = {}

  return <TLDraw document={document} />
}

Controlling the Component through the TLDrawState API

You can also control the TLDraw component imperatively through the TLDrawState API.

import { TLDraw, TLDrawState } from '@tldraw/tldraw'

function App() {
  const handleMount = React.useCallback((state: TLDrawState) => {
    state.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 TLDrawState 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, TLDrawState } from '@tldraw/tldraw'

function App() {
  const handleChange = React.useCallback((state: TLDrawState, 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.

Author