react-chemdoodle/src/SketcherCanvas/SketcherCanvas.jsx

The React Chemdoodle Web Components (`react-chemdoodle`) is a UI library add-on for the [ChemDoodle Web Components](https://web.chemdoodle.com/) (CWC) library. CWC provides 18 unique component canvases from a simple 2D "ViewerCanvas" to 3D "EditorCanvas3D

/* eslint-disable no-undef */
import '../patches/ChemDoodleWeb-9.5.0-patch'
import { useEffect, useRef, memo } from 'react'

export const SketcherCanvas = memo(
  ({ id, width = 100, height = 100, canvasOptions }) => {
    const sketcherInstance = useRef(null)

    useEffect(() => {
      sketcherInstance.current = new ChemDoodle.SketcherCanvas(
        id,
        undefined,
        undefined,
        canvasOptions
      )
      sketcherInstance.current.toolbarManager.setup()
    }, [])

    return <canvas id={id} width={width} height={height} />
  }
)