Prevent instance change
You can use Editor's side effects API to prevent certain changes from occuring in the instance state. In this example, we prevent the user from changing the instance's isGridMode
property.
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this page!
export default function PreventInstanceChangeExample() {
return (
<div className="tldraw__editor">
<Tldraw
onMount={(editor) => {
editor.updateInstanceState({ isGridMode: true })
// [1]
editor.sideEffects.registerBeforeChangeHandler('instance', (prev, next) => {
if (!next.isGridMode) {
return prev
}
return next
})
}}
/>
</div>
)
}
/*
In this example, we want to prevent the user from changing the isGridMode property.
[1]
Here we register a handler that will run whenever a change is about to be made to
to an "instance" type record.
The logic we want is that: if the new instance has `isGridMode` set to `false`, then
we want to reject the change; otherwise, we want to allow it.
To reject the change, we return the previous record. To allow the change, we
return the next record.
*/
Is this page helpful?
Prev
Indicators logicNext
Prevent shape change