Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-chemdoodle

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-chemdoodle

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

latest
Source
npmnpm
Version
0.0.7
Version published
Weekly downloads
4
-84.62%
Maintainers
1
Weekly downloads
 
Created
Source

React Chemdoodle Web Components

The React Chemdoodle Web Components (react-chemdoodle) is a UI library add-on for the ChemDoodle Web Components (CWC) library. CWC provides 18 unique component canvases from a simple 2D "ViewerCanvas" to 3D "EditorCanvas3D" to a "PeriodicTableCanvas". At the moment, react-chemdoodle wraps just two canvases, the 2D "ViewerCanvas" and "SketcherCanvas". Contributions are welcome to provide bindings for additional canvases.

Installation

As 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. 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. While react-chemdoodleweb can be downloaded from NPM, CWC scripts need to be embedded into the HTML document. 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. 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).

1. Download CWC

react-chemdoodleweb depends on the ChemDoodle global object, so CWC first needs to be installed in your project. Downloaded CWC from web.chemdoodle.com/installation/download.

2. Embed CWC as a client-side script

Place CWC in the public folder of a React project created with Create React App or equivalent. The environment variable PUBLIC_URL can be used in the React application to reference assets in the public folder, e.g.

<script
  type="text/javascript"
  src="%PUBLIC_URL%/ChemDoodleWeb-9.4.0/install/ChemDoodleWeb.js"
></script>

In it's entirety, your React app'sindex.html file may look something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="%PUBLIC_URL%/ChemDoodleWeb-9.5.0/install/ChemDoodleWeb.css"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="%PUBLIC_URL%/ChemDoodleWeb-9.5.0/install/uis/jquery-ui-1.11.4.css"
      type="text/css"
    />
    <script
      type="text/javascript"
      src="%PUBLIC_URL%/ChemDoodleWeb-9.5.0/install/ChemDoodleWeb.js"
    ></script>
    <script
      type="text/javascript"
      src="%PUBLIC_URL%/ChemDoodleWeb-9.5.0/install/uis/ChemDoodleWeb-uis.js"
    ></script>
    <title>My React Application</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Only embed the scripts and CSS that you need for you project, though. ChemDoodle can now be called on component mount. Verify that the ChemDoodle is available in the project:

useEffect(() => {
  console.log(ChemDoodle.getVersion())
}, [])

Congrats! The ChemDoodle Web Components are now installed in your project! Now we are ready to render a molecule to the page. (Did you see the version logged to console twice? That is React.StrictMode 😉.)

3. Add CWC to package.json (optional)

The CWC package can be also optionally be listed as a peer dependency for visibility in your project. For example,

"peerDependencies": {
    "chemdoodleweb": "file:ChemDoodleWeb-9.5.0"
},

4. Install react-chemdoodle

npm install react-chemdoodle

5. Import the react CWC components

Import the components in your react application, pass it molecular data (MOL file format) as a prop, and style the canvas and molecular structure as desired:

import { ViewerCanvas } from 'react-chemdoodle'

function Caffeine() {
    const caffeine = // fetch molecular data

    return (
        <ViewerCanvas
            id="caffeine"
            data={{ mol: caffeine }}
            canvasStyle={{
                bonds_width_2D: 0.6,
                bonds_saturationWidthAbs_2D: 2.6,
                bonds_hashSpacing_2D: 2.5,
                atoms_font_size_2D: 10,
                atoms_font_families_2D: ['Helvetica', 'Arial', 'sans-serif']
            }}
            moleculeStyle={{
                scaleToAverageBondLength: 14.4
            }}
        />
    )
}

See the react-example-app (npm run start) in the react-chemdoodle monorepo for a full, working example.

Happy (chem) doodling!

Keywords

react
javascript
chemistry
chemical
graphics
cheminformatics

FAQs

Package last updated on 15 Feb 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

2025 Report: Destructive Malware in Open Source Packages

Research

2025 Report: Destructive Malware in Open Source Packages

Destructive malware is rising across open source registries, using delays and kill switches to wipe code, break builds, and disrupt CI/CD.

By Kush Pandya  -  Dec 24, 2025
Spearphishing Campaign Abuses npm Registry to Target U.S. and Allied Manufacturing and Healthcare Organizations

Research

/

Security News

Spearphishing Campaign Abuses npm Registry to Target U.S. and Allied Manufacturing and Healthcare Organizations

A five-month operation turned 27 npm packages into durable hosting for browser-run lures that mimic document-sharing portals and Microsoft sign-in, targeting 25 organizations across manufacturing, industrial automation, plastics, and healthcare for credential theft.

By Nicholas Anderson, Kirill Boychenko  -  Dec 23, 2025