npm install reactive-elements
yarn add reactive-elementsPlacing component in a pure HTML
<body>
<my-react-component items='{{"values": ["one", "two"]}}'></my-react-component>
</body>React class definition
/* @jsx React.DOM */
MyComponent = React.createClass({
render: function () {
console.log(this.props.items); // passed as HTML tag`s argument
console.log(this.props.children); // original tag children
return (
<ul>
<li>React content</li>
</ul>
);
},
});
document.registerReact('my-react-component', MyComponent);Original children of a custom element is injected to component as
this.props.children.
<my-react-component>Hello world</my-react-component>In this case this.props.children is equal to "Hello world".
Container node of the element is passed as this.props.container. Both
props.container and props.children have type of documentFragment.
An attribute that has the value "true" or "false" will be converted into the
boolean true or false when given to the React component:
<my-react-component is-logged-in="true">Hello world</my-react-component>Here, this.props.isLoggedIn === true within the React component.
If you don't want this behaviour you can disable it with a special attribute:
<my-react-component is-logged-in="true" reactive-elements-no-boolean-transform
>Hello world</my-react-component
>If you want to expose React component methods on custom element - assign them to component as following:
componentDidMount: function() {
this.props.container.setTextContent = this.setTextContent.bind(this);
}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);
}If you don't ever want to listen out to attributes changing (often you might
know that none of them will), you can pass the option ignoreAttributeChanged
to turn off the attributeChanged callback. This option was added in 0.9.0.
document.registerReact('foo-bar', FooBar, { ignoreAttributeChanged: true });You may trigger DOM event from React component by using following snippet:
var event = new CustomEvent('change', {
bubbles: true,
});
React.findDOMNode(this).dispatchEvent(event);Subscribing to DOM events is similar:
React.findDOMNode(this).addEventListener('change', function(e){...});By default this module uses the web component createdCallback, so it kicks off
the rendering process before the component is fully attached to the DOM. In
some cases you might prefer to delay the rendering process until the component
is attached.
If this is the case, you can pass renderOnAttached as an option:
document.registerReact('example-component', 'ExampleComponent', {
renderOnAttached: true,
});Polyfill binds to DOMContentLoaded in order to process DOM so no custom
elements exist until it fired. To prevent this hook into DOMContentLoaded and
operate elements on it or after.
Copyright 2014 Denis Radin aka PixelsCommander
Inspired by Christopher Chedeau`s react-xtags