ketcher
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!,
{
'custom header': 'value' // optionally you can add custom headers object
}
)
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-React for viewing and editing data in 3D. Miew-React package default exports Viewer component which initializes and renders a Miew instance inside of it
...
import Viewer from 'miew-react'
const MyComponent = () => {
return <Viewer />
}
...
...
You can find the latest version of Miew-React here. The last checked version - 1.0.0.