This project wraps the BSD licensed JSME molecule editor (by B. Bienfait and P. Ertl) in a React component for easy use in React apps.
Please note that JSME was originally developed in Java and transpiled to Javascript. By modern Javascript standards it uses a few unconventional techniques to load. To accomodate this this library will perform a side effect when the component is being loaded in the browser of appending the script tag that loads the JSME Javascript entrypoint (which will then trigger a few more loads). This works with lazy loading of Javascript modules.
If for some reason you want this loading to happen at a specific (early) point in time you can call the setup function of this module which will perform the steps described above.
yarn add jsme-react
# or
npm install --save jsme-react
import { Jsme } from 'jsme'
export default class App extends Component {
logSmiles(smiles) {
console.log(smiles)
}
render () {
return (
<div>
<Jsme height="300px" width="400px" options="oldlook,star" onChange={this.logSmiles}/>
</div>
)
}
}
Required props
height
: string, e.g. "300px"width
: string, e.g. "400px"
Optional props
options
: string that is a comma separated string of JSME options. The available options are described on the JSME documentation pageonChange
: event handler that is passed the smiles whenever it is changed in the editorsmiles
: the smiles to display (when not set an empty canvas will be shown)src
: url of the jsme source code. Default value is"https://jsme.cloud.douglasconnect.com/JSME_2017-02-26/jsme/jsme.nocache.js"
Open two terminals, in one do npm start
at the root level, in the other npm start
in the example directory.
BSD-3 © EdelweissConnect