Tiny Google Polymer or Mozilla X-Tags add-on which allows to use React.js components as custom HTML elements. Also works with a native Custom Elements implementation if present.
Using component in HTML
<body>
<my-react-component items="{window.someArray}"></my-react-component>
</body>React component definition
/* @jsx React.DOM */
MyComponent = React.createClass({
render: function() {
console.log(this.props.items);
console.log(this.props._content); // original tag contents in a <content>
return <ul><li>React content</li></ul>;
}
});
document.registerReact('my-react-component', MyComponent);Find complete examples in corresponding folder.
Content of custom element is injected to component as this.props._content.
<my-react-component">Hello world</my-react-component>
In this case props._content is equal "Hello world".
- React.js
- X-Tag core or Polymer custom elements or native browser support for custom elements.
Copyright 2014 Denis Radin aka PixelsCommander
Inspired by Christopher Chedeau`s react-xtags
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent