kopia lustrzana https://github.com/Tldraw/Tldraw
34 wiersze
986 B
TypeScript
34 wiersze
986 B
TypeScript
import { useLayoutEffect } from 'react'
|
|
import { DefaultCanvas, Tldraw } from 'tldraw'
|
|
import 'tldraw/tldraw.css'
|
|
import { CustomRenderer } from './CustomRenderer'
|
|
|
|
export default function CustomRendererExample() {
|
|
useLayoutEffect(() => {
|
|
// Hide the regular shapes layer using CSS.
|
|
const script = document.createElement('style')
|
|
if (!script) return
|
|
script.innerHTML = `.tl-shapes { display: none; }`
|
|
document.body.appendChild(script)
|
|
return () => {
|
|
script.remove()
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className="tldraw__editor">
|
|
<Tldraw
|
|
persistenceKey="example"
|
|
components={{
|
|
// We're replacing the Background component with our custom renderer
|
|
Background: CustomRenderer,
|
|
// Even though we're hiding the shapes, we'll still do a bunch of work
|
|
// in react to figure out which shapes to create. In reality, you might
|
|
// want to set the Canvas component to null and render it all yourself.
|
|
Canvas: DefaultCanvas,
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|