kekule-react
v0.1.1
Published
React component wrapper for Kekule.js widgets
Downloads
26
Maintainers
Readme
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.