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 jsmeSetup function of this module which will perform the steps described above.
- React 17 or 18
npm install @loschmidt/jsme-react
# or
yarn add @loschmidt/jsme-reactRequired props
-
height: number or string, e.g. 300 or "300px" -
width: number or string, e.g. 400 or "400px"
Optional props
-
options: string or array of strings. The available JSME options are described on the JSME documentation page -
onChange: event handler that is passed the smiles whenever it is changed in the editor -
smiles: the smiles to display (if not set, an empty canvas will be shown) -
src: url of the jsme source code. Default value is"https://jsme-editor.github.io/dist/jsme/jsme.nocache.js" -
setup: boolean telling whether JSME script should be loaded by the Jsme component,true- JSME script will be loaded once,false- JSME script will never be loaded,undefined(default) - JSME script will be loaded once, if was not previously loaded using a script element (included by you as library user). -
disabled: boolean. When true, user is not able to interact and opacity is decreased
There are several ways how to load the underlying JSME library.
- Fully automatic (recommended).
- Use the
jsmeSetupfunction. - Add
<script>tag into your HTML template.
import { Jsme } from '@loschmidt/jsme-react'
export default function App() {
const logSmiles = (smiles) => {
console.log(smiles)
}
return (
<Jsme height={300} width={400} options="oldlook,star" onChange={logSmiles}/>
)
}JSME library will be loaded during rendering of the Jsme component.
You can use setup={true} but it's not necessary.
Before rendering a Jsme component, run the jsmeSetup function.
import { Jsme, jsmeSetup } from '@loschmidt/jsme-react'
// Load JSME library
jsmeSetup();
export default function App() {
const logSmiles = (smiles) => {
console.log(smiles)
}
return (
<Jsme height={300} width={400} options="oldlook,star" onChange={logSmiles}/>
)
}You can use setup={false} but it's not necessary.
To avoid dynamic creation of script elements, you can include it into your HTML template.
<head>
<!-- ... -->
<script src="https://jsme-editor.github.io/dist/jsme/jsme.nocache.js" type="text/javascript"></script>
</head>import { Jsme } from '@loschmidt/jsme-react'
export default function App() {
const logSmiles = (smiles) => {
console.log(smiles)
}
return (
<Jsme height={300} width={400} options="oldlook,star" onChange={logSmiles}/>
)
}You can use setup={false} but it's not necessary.
By default, JSME library is downloaded from https://jsme-editor.github.io/. If you want, you can use your copy by installing the jsme-editor package and serve it yourself.
npm install jsme-editorExample for the Create React App framework:
// File: src/setupProxy.js
const express = require('express');
const path = require('path');
const jsmeEditorDir = path.dirname(require.resolve('jsme-editor'));
module.exports = function(app) {
app.use(
'/jsme',
express.static(jsmeEditorDir)
);
};You can find a working example in the example directory.
# In the repository root
npm install
npm link
npm start# In the "example" directory
npm install
npm link @loschmidt/jsme-react
npm startBSD-3