ketcher-react

Copyright (c) 2021 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.

For more details please look at the following link.

The ketcher-react package contains only the functionality necessary to define components. It is used together with ketcher-core and optionally with ketcher-standalone if standaolone mode is required.

Installation

The ketcher-react library is available as an NPM package. Install it either with NPM:

npm install --save ketcher-react

or Yarn:

yarn add ketcher-react

Usage

import { RemoteStructServiceProvider } from 'ketcher-core'

const structServiceProvider = new RemoteStructServiceProvider(
  process.env.REACT_APP_API_PATH!
)

const MyComponent = () => {
  return (
    <Editor
      staticResourcesUrl={process.env.PUBLIC_URL}
      structServiceProvider={structServiceProvider}
    />
  )
}

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.