Skip to content

Instantly share code, notes, and snippets.

@sthzg
Last active January 31, 2017 21:24
Show Gist options
  • Select an option

  • Save sthzg/7a9ac94ca2d39d7976aa to your computer and use it in GitHub Desktop.

Select an option

Save sthzg/7a9ac94ca2d39d7976aa to your computer and use it in GitHub Desktop.
This gist shows an idea on how to expose a public api for a ReactJS component to a Non-ReactJS host page.
'use strict';
/**
* This is the actual root component that we want to either use in
* the context of a bigger ReactJS app or as a top level component used on a
* traditional Non-ReactJS host page. In the second case we want the component
* to expose a public API.
*/
var React = require('React');
var MyComponent = React.createClass({
render() {
return(<p>Hello {this.props.username}!</p>);
},
_show(msg) {
console.log(msg);
},
api() {
var that = this;
return {
show(msg) {
that._show(msg);
}
};
}
});
module.exports = MyComponent;
'use strict';
/**
* When building as a top-level library component that should be rendered
* on a Non-ReactJS host page, this wrapper module will be the entry point
* of our build process.
*
* The build process entering on this level will generate the
* ``react.mycomponent.lib.min.js`` file that can be requested in the browser.
*/
var React = require('React');
var MyComponent = require('./MyComponent');
module.exports = {
render(domId, data) {
return (
function (component) {
return component.api();
}(
React.render(
<MyComponent username={data.username} />,
document.getElementById(domId)
)
)
);
}
};
<div id="reactjs-canvas"></div>
<script type="text/javascript" src="./react.mycomponent.lib.min.js"></script>
<script type="text/javascript">
/**
* We call the ``render()`` method on the wrapper (probably render is a bad name) and
* in return get the api object from ``MyComponent``.
*/
var myComponent = MyComponentLibWrapper.render('reactjs-canvas', { username: 'foobar' });
myComponent.show('I am logging something from outside via the public api.');
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment