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.
UPD Convert Angular and Backbone views as well with MVC elements project
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.
Original content of a 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 to "Hello world".
- NPM: reactive-elements
- Bower: ReactiveElements
- 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