Kekule-React

React component wrapper for Kekule.js widgets.

Usage

Use the following codes to wrap a Kekule.js widget class to React component:

// composer.js
import { Kekule } from 'kekule';
import { KekuleReact } from 'kekule-react';
import 'kekule/theme';

let Composer = KekuleReact.Utils.wrapWidget(Kekule.Editor.Composer, 
    {
      // reactComponent.props.on[EventName] will be called when Kekule events being invoked in widget 	
      exposeWidgetEvents: true,	       
      // each of widget's property will map to a React component's property. E.g., setting reactComponent.props.chemObj will modify widget.chemObj
      exposeWidgetPropertiesToReactProps: true,
      // explicitly set property names exposed to React
      //exposedProperties: []
      // property names hide from React
      ignoredProperties: ['editorNexus', 'actionMap']
    });

export default Composer;

Then the wrapped component can be utilized in React application:

// myApp.js
class MyApp extends React.Component {
	constructor(props)
	{
		super(props);
		this.state = {
			composerPredefinedSetting: 'molOnly',	          
			chemObj: null
		};
		this.composer = React.createRef();			

		this.onComposerUserModificationDone = this.onComposerUserModificationDone.bind(this);
	}
	render()
	{
		return (<div>
			<Composer predefinedSetting={this.state.composerPredefinedSetting} onUserModificationDone={this.onComposerUserModificationDone}></Composer>	          
		</div>);
	}

	onComposerUserModificationDone(e)
	{
		this.setState({chemObj: this.composer.current.getWidget().getChemObj()});			
	}
}

export default MyApp;

Some common-used Kekule widgets has already been wrapped with default options ({exposeWidgetEvents: true, 'exposeWidgetPropertiesToReactProps': true}), you can use them directly:

import { Kekule } from 'kekule';
import { KekuleReact, Components } from 'kekule-react';
import 'kekule/theme';

class App extends React.Component {		
	render()
	{
		return (<div>
                    <Components.PeriodicTable />
                    <Components.Viewer />
                    <Components.SpectrumInspector />
                    <Components.ChemObjInserter />
                    <Components.SpectrumObjInserter />
                    <Components.Composer />
		</div>);
	}
}

Several util methods are also wrapped in the React component to access the widget:

• reactComponent.getWidgetPropValue(kekulePropName): returns the property value of the wrapped Kekule widget;
• reactComponent.setWidgetPropValue(kekulePropName, value): sets the property value of the wrapped Kekule widget;
• reactComponent.getWidget(): returns the wrapped Kekule widget instance itself.

Inside the wrapped Kekule widget, method kekuleWidget.getReactComponent() can be used to retrieve the wrapper React component. E.g.:

console.log(reactComponent.getWidget().getReactComponent() === reactComponent);  // true
console.log(reactComponent.getWidgetPropValue('enabled') === reactComponent.getWidget().enabled);  // true

You may also check the simple demo at the /demo directory of this repository to learn more.