Only embed the scripts and CSS that you need for you project, though. My React Application You need to enable JavaScript to run this app.

The environment variable PUBLIC_URL can be used in the React application to reference assets in the public folder, e.g. Place CWC in the public folder of a React project created with Create React App or equivalent. Downloaded CWC from /installation/download. React-chemdoodleweb depends on the ChemDoodle global object, so CWC first needs to be installed in your project.

As well, it will be loaded even if the current page does not use it (The size of the minified CWC script is 414 kB). While this is a simple implementation that ensures CWC is available everywhere for the lifetime of the React application, the tradeoff is that CWC is not bundled with the rest of the React application code and will make an additional network request. While react-chemdoodleweb can be downloaded from NPM, CWC scripts need to be embedded into the HTML document. The react-chemdoodle library on the otherhand is a 'require time' node module that can be compiled by JS bundlers more typical in modern web application development. InstallationĪs it was originally written in 2007, CWC consists of a number of IIFE modules divided into two javascript files, one a 'core' file and one an optional jQuery-based UI, that are loaded by a client browser. Contributions are welcome to provide bindings for additional canvases. At the moment, react-chemdoodle wraps just two canvases, the 2D 'ViewerCanvas' and 'SketcherCanvas'. CWC provides 18 unique component canvases from a simple 2D 'ViewerCanvas' to 3D 'EditorCanvas3D' to a 'PeriodicTableCanvas'.

The React Chemdoodle Web Components ( react-chemdoodle) is a UI library add-on for the ChemDoodle Web Components (CWC) library.

Chemdoodle web components