Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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.

About

Using React to implement xtags

Resources

Releases

No releases published

Packages

No packages published