Note! The docs here are for the v1.0.0 alpha. This is _not_ ready for production use yet.

You should use this README, which refers to 0.10.0, the latest stable version on npm: https://github.com/PixelsCommander/ReactiveElements/blob/7cce3d7b472989878ac1433cec0e8168fd4136aa/README.md

Convert React.js components into Web Components

``sh
npm install reactive-elements
yarn add reactive-elements
`

How to use?

$3

Placing component in a pure HTML

`html



`

React class definition

`js
/ @jsx React.DOM /
MyComponent = React.createClass({
render: function() {
console.log(this.props.items); // passed as HTML tags argument
console.log(this.props.children); // original tag children
return (

• React content

);
},
});

ReactiveElements('my-react-component', MyComponent);
``

$3

`js
import React, { Component } from 'react';
import ReactiveElements from 'reactive-elements';

class Welcome extends Component {
render() {
return

Hello, {this.props.name}

;
}
}

ReactiveElements('welcome-component', Welcome);
`

Nesting

Original children of a custom element is injected to component as
this.props.children.

`html
Hello world
`

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.

Boolean attribute transforms (added in version 0.7.0)

An attribute that has the value "true" or "false" will be converted into the
boolean true or false when given to the React component:

`html
Hello world
`

Here, this.props.isLoggedIn === true within the React component.

If you don't want this behaviour you can disable it with a special attribute:

`html
Hello world
`

Exposing components methods on custom element

If you want to expose React component methods on custom element - assign them to
component as following:

`js
componentDidMount: function() {
this.props.container.setTextContent = this.setTextContent.bind(this);
}
`

Handling attributes change

You may add attributeChanged callback to component in order to handle / modify
/ filter incoming values.

`js
attributeChanged: function(attributeName, oldValue, newValue) {
console.log('Attribute ' + attributeName + ' was changed from ' + oldValue + ' to ' + newValue);
this.props[attributeName] = parseInt(newValue);
}
`

Communicate via DOM events

You may trigger DOM event from React component by using following snippet:

`js
var event = new CustomEvent('change', {
bubbles: true,
});
React.findDOMNode(this).dispatchEvent(event);
`

Subscribing to DOM events is similar:

`js
React.findDOMNode(this).addEventListener('change', function(e){...});
`

Options

You can also specify options to the ReactiveElements call, e.g.

`js
ReactiveElements('welcome-component', Welcome, options);
`

$3

By default, your React element is rendered directly into the web-component root. However, by setting this option - your React element will instead be rendered in a Shadow DOM inside the web-component instead.

Dependencies

- React.js
- React DOM
- Custom elements support or
polyfill
- Support or polyfills for:
- regexp.match
- regexp.replace
- object.define-setter
- object.define-getter
- object.define-property
- function.name
- web.dom.iterable
- array.iterator
- object.keys
- object.set-prototype-of
- reflect.construct
- function.bind

License

MIT: http://mit-license.org/

Copyright 2014 Denis Radin aka PixelsCommander

Inspired by Christopher Chedeaus
react-xtags