Skip to content

Instantly share code, notes, and snippets.

@OlavHN

OlavHN/gist:ff73b104bb25e5e08a51

Last active June 28, 2017 19:27
Show Gist options
  • Save OlavHN/ff73b104bb25e5e08a51 to your computer and use it in GitHub Desktop.
Save OlavHN/ff73b104bb25e5e08a51 to your computer and use it in GitHub Desktop.
Download ZIP
React render to polymer components!
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<!-- Web Component Polyfill for old browsers -->
<script src="https://www.polymer-project.org/platform.js"></script>
<!-- Release candidate of next React -->
<script src="http://fb.me/react-with-addons-0.12.0-rc1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0-rc1.js"></script>
<!-- Import a web component -->
<link rel="import" href="https://www.polymer-project.org/components/core-icons/core-icons.html">
</head>
<body>
<!-- Web component in its natural habitat -->
<core-icon src="//www.polymer-project.org/images/icons/android.svg"></core-icon>
<!-- React renders to Web Components!!! -->
<div id="react-root"></div>
<script type="text/jsx">
var coreIcon = React.createElement('core-icon', {src: '//www.polymer-project.org/images/icons/android.svg'});
React.render(coreIcon, document.getElementById('react-root'))
</script>
</body>
</html>
@jschr
Copy link

jschr commented Nov 8, 2014

Worth mentioning that react will not render non-standard attributes. This example works because src is a whitelisted attribute in React. Other web components will not work currently unless you patch React to allow for any attribute.

facebook/react#140
facebook/react#1730

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment