diff --git a/apps/examples/src/examples/custom-styles/CustomStylesExample.tsx b/apps/examples/src/examples/custom-styles/CustomStylesExample.tsx index 74fb91ee6..99135e264 100644 --- a/apps/examples/src/examples/custom-styles/CustomStylesExample.tsx +++ b/apps/examples/src/examples/custom-styles/CustomStylesExample.tsx @@ -34,7 +34,7 @@ create a custom style for a card shape that lets the user apply a filter to blur invert or grayscale the card. [1] -We define an array to hold the custom shape util and cusom tool. It's important to +We define an array to hold the custom shape util and custom tool. It's important to do this outside of any React component so that this array doesn't get redefined on every render. We'll pass this into the Tldraw component's `shapeUtils` and `tools` props. diff --git a/apps/examples/src/examples/persistence/PersistenceExample.tsx b/apps/examples/src/examples/persistence/PersistenceExample.tsx index 23e6b2d5a..1e8356452 100644 --- a/apps/examples/src/examples/persistence/PersistenceExample.tsx +++ b/apps/examples/src/examples/persistence/PersistenceExample.tsx @@ -2,16 +2,20 @@ import { Tldraw, createTLStore, defaultShapeUtils, throttle } from '@tldraw/tldr import '@tldraw/tldraw/tldraw.css' import { useLayoutEffect, useState } from 'react' +// There's a guide at the bottom of this file! + const PERSISTENCE_KEY = 'example-3' export default function PersistenceExample() { + //[1] const [store] = useState(() => createTLStore({ shapeUtils: defaultShapeUtils })) + //[2] const [loadingState, setLoadingState] = useState< { status: 'loading' } | { status: 'ready' } | { status: 'error'; error: string } >({ status: 'loading', }) - + //[3] useLayoutEffect(() => { setLoadingState({ status: 'loading' }) @@ -43,6 +47,7 @@ export default function PersistenceExample() { } }, [store]) + // [4] if (loadingState.status === 'loading') { return (