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.