Use this library in React project

[zatarra97]

Hi, how can I use this library in my React Project?

[yb]

You can customize a component and instantiate SmilesDrawer.SvgDrawer() in useEffect()

[leosv123]

Issues while running in Reactjs:

TypeError: Cannot read properties of null (reading 'determineDimensions')
at SvgDrawer.draw (SvgDrawer.js:67:1)
at Drawer.draw (Drawer.js:47:1)
at SmileDrawer.js:14:1
at SmilesDrawer.parse (app.js:80:1)
at SmileDrawerContainer (SmileDrawer.js:12:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateFunctionComponent (react-dom.development.js:19588:1)
at beginWork (react-dom.development.js:21601:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)

[leosv123]

Issue in referencing the canvas

[twoXes]

anyone get this to work in svelte?

[biostu24]

Here's a component I created that works with similes-drawer.

import React, { useRef, useEffect } from "react";
import SmilesDrawer from "smiles-drawer";

const USE_SVG = true;

const SETTINGS = {
  width: 800,
  height: 400,
};

const SmileDrawerContainer = ({ smilesStr }: { smilesStr: string }) => {
  if (USE_SVG) {
    // SVG version (versions: <=2.0.3 and 2.1.7)
    const svgRef = useRef<SVGElement>(null);

    let drawer = new SmilesDrawer.SvgDrawer(SETTINGS);

    useEffect(() => {
      SmilesDrawer.parse(smilesStr, function (tree: any) {
        drawer.draw(tree, "structure-svg", "light");
      });
    }, []);

    return (
      <div>
        <svg id="structure-svg"></svg>
      </div>
    );
  } else {
    // Canvas version (versions: <=2.0.3 only)
    const canvasRef = useRef<HTMLCanvasElement>(null);

    let drawer = new SmilesDrawer.Drawer(SETTINGS);

    useEffect(() => {
      SmilesDrawer.parse(smilesStr, function (tree: any) {
        drawer.draw(tree, "structure-canvas", "light");
      });
    }, []);

    return (
      <div>
        <canvas
          className="relative"
          id="structure-canvas"
          ref={canvasRef}
          width={"800px"}
          height={"400px"}
        />
      </div>
    );
  }
};

export default SmileDrawerContainer;