How to store data in state in canvas?

[shibilainfoskies]

I am using your npm package [react-sketch-canvas] for the doctor to write prescription in scratch pad.
How to do storing for canvas in state so that doctor can come back to the scratch pad and write on top of the existing??

[9uifranco]

I know this is old but I thought it might still be helpful for someone going through a similar situation.

To store the canvas paths you can access exportPaths method using ref like this:

const canvasRef = useRef<ReactSketchCanvasRef>(null);

<ReactSketchCanvas
    ref={canvasRef}
    onChange={handleCanvasOnChange}
    style={styles}
    width="600"
    height="800"
    strokeWidth={4}
    strokeColor="black"
/>

Then, you can create a Save button or use the onChange prop to save it every time the user interacts with the canvas (if you choose the second method I think you could add some debounce logic to avoid saving too frequently)

const [canvas, setCanvas] = useState<CanvasPath[]>([]);

const handleCanvasOnChange = (e: any) => {
    const exportedCanvasPromise = canvasRef?.current?.exportPaths();
    exportedCanvasPromise?.then((result: any[]) => {
        localStorage.setItem('paths', JSON.stringify(result))
        setCanvas(result)
    }).catch((error: any) => {
        console.error(error);
    });
}

exportPaths method will return a promise, so you need to wait for that promise to complete before saving the result, which is the paths.

Then you can retrieve that data and load to your canvas using loadPaths method, like this:

useEffect(() => {
    if (canvasRef) {
        let paths = localStorage.getItem('paths')
        if (paths) {
            let jsonPaths = JSON.parse(paths)
            canvasRef?.current?.loadPaths(jsonPaths)
        }
    }
}, [])