Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including reactive-elements with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactiveElements = require("reactive-elements")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

reactive-elements v0.10.0

Allows to use React.js component as custom element

Reactive Elements

Convert React.js components into Web Components

npm install reactive-elements
yarn add reactive-elements

How to use?

Placing component in a pure HTML

    <my-react-component items="{window.someArray}"></my-react-component>

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 (
        <li>React content</li>

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.

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:

<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>

Exposing components methods on custom element

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);

Handling attributes change

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 });

Communicate via DOM events

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

var event = new CustomEvent('change', {
  bubbles: true,

Subscribing to DOM events is similar:

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

Using attachedCallback (Added in 0.8.0)

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,


  • React.js
  • function.bind and Object.create support or polyfills
  • Custom elements support or polyfill

Custom elements polyfill behavior

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free