Skip to content
Allows to use React.js component as HTML element (web component)
JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Added small logo Mar 28, 2014
example New demo Dec 19, 2018
src
test feature: support web component spec version 1 Sep 26, 2018
.gitignore New demo Dec 19, 2018
.prettierignore
.travis.yml ci: add travis ci for continuous integration testing May 4, 2018
CHANGELOG.md style: run prettier Oct 31, 2018
README.md Make the shadow root optional Feb 13, 2019
babel.config.js build: remove unneeded plugin Oct 31, 2018
gulpfile.js Run prettier on all files May 10, 2018
index.js major refactoring Jul 27, 2015
karma.conf.js feature: support web component spec version 1 Sep 26, 2018
package.json Updates package json to meet new URLs Aug 21, 2019
prettier.config.js Set up prettier May 10, 2018
rollup.config.js Fix output.globals + exposing of utils Dec 18, 2018
yarn.lock

README.md

Reactive Elements

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

npm install reactive-elements
yarn add reactive-elements

How to use?

Directly in a browser

Placing component in a pure HTML

<body>
	<my-react-component items="{window.someArray}"></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>
    );
  },
});

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

With Bundler

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

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactiveElements('welcome-component', Welcome);

Nesting

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

Communicate via DOM events

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

Options

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

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

options.useShadowDom (default false)

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 Chedeau`s react-xtags

You can’t perform that action at this time.