npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@emeraldsci/ketcher-react

v2.1.0-0.0.29

Published

Web-based molecule sketcher

Downloads

813

Readme

Ketcher

npm version Downloads License

Copyright (c) 2020 EPAM Systems, Inc

Ketcher is an open-source web-based chemical structure editor incorporating high performance, good portability, light weight, and ability to easily integrate into a custom web-application. Ketcher is designed for chemists, laboratory scientists and technicians who draw structures and reactions.

Key Features

  • Fast 2D structure representation that satisfies common chemical drawing standards
  • 3D structure visualization
  • Draw and edit structures using major tools: Atom Tool, Bond Tool, and Template Tool
  • Template library (including custom and user's templates)
  • Add atom and bond basic properties and query features, add aliases and Generic groups
  • Select, modify, and erase connected and unconnected atoms and bonds using Selection Tool, or using Shift key
  • Simple Structure Clean up Tool (checks bonds length, angles and spatial arrangement of atoms) and Advanced Structure Clean up Tool (+ stereochemistry checking and structure layout)
  • Aromatize/De-aromatize Tool
  • Calculate CIP Descriptors Tool
  • Structure Check Tool
  • MW and Structure Parameters Calculate Tool
  • Stereochemistry support during editing, loading, and saving chemical structures
  • Storing history of actions, with the ability to rollback to previous state
  • Ability to load and save structures and reactions in MDL Molfile or RXN file format, InChI String, ChemAxon Extended SMILES, ChemAxon Extended CML file formats
  • Easy to use R-Group and S-Group tools (Generic, Multiple group, SRU polymer, peratom, Data S-Group)
  • Reaction Tool (reaction generating, manual and automatic atom-to-atom mapping)
  • Flip/Rotate Tool
  • Zoom in/out, hotkeys, cut/copy/paste
  • OCR - ability to recognize structures at pictures (image files) and reproduce them
  • Copy and paste between different chemical editors
  • Settings support (Rendering, Displaying, Debugging)
  • Use of SVG to achieve best quality in-browser chemical structure rendering
  • Languages: JavaScript with third-party libraries

Installation

Ketcher library is available as an NPM package. Install it either with NPM:

npm install --save ketcher-react

or Yarn:

yarn add ketcher-react

Usage

Indigo Service

Ketcher uses Indigo Service for server operations. You may pass it as a property while Editor component is used or just add api_path query parameter:

<Editor staticResourcesUrl={process.env.PUBLIC_URL} apiPath={link to Indigo service} />
    or
http://localhost:3000/?api_path={link to Indigo service}

You can find the instruction for service installation here.

3D Viewer

Ketcher uses Miew for viewing and editing data in 3D. For use of this functionality you should add the link to miew by your own:

...
import Miew from 'miew'
import 'miew/dist/Miew.min.css'
...
;(global as any).Miew = Miew
...

You can find the latest version of viewer here. The last checked version - 0.9.0.

For more details please read DEVNOTES.

License

Please read LICENSE and NOTICE for details.