# jsme-react

> Jsme react wrapper - allows using the JSME molecule editor as a react component

Latest version **0.0.9** (published 2020-09-21) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install jsme-react
pnpm add jsme-react
yarn add jsme-react
bun add jsme-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2020-09-21 |
| First published | 2020-03-09 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 32.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | douglasconnect |
| Maintainers | douglasconnect |

## Links

- npm: https://www.npmjs.com/package/jsme-react
- Repository: https://github.com/douglasconnect/jsme-react
- Homepage: https://github.com/douglasconnect/jsme-react#readme
- Issues: https://github.com/douglasconnect/jsme-react/issues
- npm.io page: https://npm.io/package/jsme-react

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Recent versions

- 0.0.9 (latest) — 2020-09-21
- 0.0.8 — 2020-09-21
- 0.0.7 — 2020-09-09
- 0.0.6 — 2020-03-19
- 0.0.5 — 2020-03-13
- 0.0.4 — 2020-03-09
- 0.0.3 — 2020-03-09
- 0.0.2 — 2020-03-09
- 0.0.1 — 2020-03-09

## README

# jsme-react

This project wraps the BSD licensed [JSME molecule editor](https://peter-ertl.com/jsme/) (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.

## How to use

#### Step one: add this library to your project

```bash
yarn add jsme-react
# or
npm install --save jsme-react
```

#### Step two: use the react component

```javascript
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>
    )
  }
}
```

## Props

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 page](https://peter-ertl.com/jsme/JSME_2017-02-26/doc.html#JSME_API)
* `onChange`: event handler that is passed the smiles whenever it is changed in the editor
* `smiles`: 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"`


# Development

Open two terminals, in one do `npm start` at the root level, in the other `npm start` in the example directory.


## License

BSD-3 © [EdelweissConnect](https://github.com/douglasconnect)

---
_Source: https://npm.io/package/jsme-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._