Using React to implement xtags
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
README.md
x-react.js
x-tag-components.js

README.md

react-xtags

Using x-tags from Mozilla, we can write custom tags within the DOM and have them being rendered in React.

Read this blog article for more information.

<script src="http://fb.me/react-0.3.2.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.3.2.js"></script>
<script src="https://rawgithub.com/vjeux/react-xtags/master/x-tag-components.js"></script>

<!-- x-react is the bridge between x-tags and React -->
<script src="https://rawgithub.com/vjeux/react-xtags/master/x-react.js"></script>

<script type="text/jsx">
/** @jsx React.DOM */
var Hello = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

xreact.register('x-hello', Hello);
</script>

<x-hello name="World"></x-hello>

The rendered DOM tree lives in the shadow DOM. This lets us manipulate both the <x-hello> component as well as the rendered <div> using Web Inspector.

image

Anytime you modify the <x-hello> component, whether it is in the inspector or in Javascript with the regular DOM API, React is going to be invoked to update the rendered version.