Compatible with any custom elements implementation or polyfill.
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 demo 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".
You may add attributeChanged callback to component in order to handle / modify / filter incoming values.
attributeChanged: function(attributeName, oldValue, newValue) {
console.log('Attribute ' + attributeName + ' was changed from ' + oldValue + ' to ' + newValue);
this.props[attributeName] = parseInt(newValue);
}- NPM: reactive-elements
- Bower: ReactiveElements
Copyright 2014 Denis Radin aka PixelsCommander
Inspired by Christopher Chedeau`s react-xtags