Last active
January 31, 2017 21:24
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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) | |
| ) | |
| ) | |
| ); | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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