├── README.md
└── react-comment-component.js


/README.md:
--------------------------------------------------------------------------------
 1 | # React / JSX HTML Comments
 2 | Enable HTML comments and conditional IE comments in React components and JSX using a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
 3 | 
 4 | This repository is intended to share a solution to include native HTML comments in React components and JSX. It uses a Web Component (W3C Custom Element) to transform text to a native HTML comment.
 5 | 
 6 | The solution depends on [document.registerElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/registerElement) that requires a polyfill for most browsers, e.g. [WebReflection/document-register-element](https://github.com/WebReflection/document-register-element).
 7 | 
 8 | You can read more about Web Components at [www.webcomponents.org](http://webcomponents.org/) and [facebook.github.io/react/docs/webcomponents.html](https://facebook.github.io/react/docs/webcomponents.html).
 9 | 
10 | Include the following javascript in your application to enable the `<react-comment>` Web Component. 
11 | 
12 | ```javascript
13 | /**
14 |  * <react-comment> Web Component
15 |  *
16 |  * @usage
17 |  *  <react-comment>Comment-text, e.g. [if lte IE 9]><script ... /><![endif]</react-comment>
18 |  
19 |  * @result
20 |  *  <!--Comment-text, e.g. [if lte IE 9]><script ... /><![endif]-->
21 |  */
22 | var proto = Object.create(HTMLElement.prototype, {
23 |  name: { get: function() { return 'React HTML Comment'; } },
24 |  createdCallback: { value: function() {
25 | 
26 |   /**
27 |    * Firefox fix, is="null" prevents attachedCallback
28 |    * @link https://github.com/WebReflection/document-register-element/issues/22
29 |    */
30 |   this.is = '';
31 |   this.removeAttribute('is');
32 |  } },
33 |  attachedCallback: { value: function() {
34 |   this.outerHTML = '<!--' + this.textContent + '-->';
35 |  } }
36 | });
37 | document.registerElement('react-comment', { prototype: proto });
38 | ```
39 | 
40 | To include a comment in your JSX or React component, simply include the `<react-comment>` tag with the comment-text as content.
41 | ### JSX
42 | ```jsx
43 | <footer>Copyright {year}, Website.com</footer>
44 | <react-comment>Page loaded in {loadtime} seconds</react-comment>
45 | ```
46 | 
47 | ### React component / element
48 | ```javascript
49 | var MyComponent = React.createClass({
50 |  render: function() {
51 |   return React.createElement('react-comment',{},'This is sample comment text.');
52 |  }
53 | });
54 | ```
55 | 


--------------------------------------------------------------------------------
/react-comment-component.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * <react-comment> Web Component
 3 |  *
 4 |  * Enable regular HTML and conditional IE comments in React.js.
 5 |  *
 6 |  * @usage
 7 |  *  <react-comment>Comment-text, e.g. [if lte IE 9]><script ... /><![endif]</react-comment>
 8 | 
 9 |  * @result
10 |  *  <!--Comment-text, e.g. [if lte IE 9]><script ... /><![endif]-->
11 |  */
12 | var proto = Object.create(HTMLElement.prototype, {
13 |  name: { get: function() { return 'React HTML Comment'; } },
14 |  createdCallback: { value: function() {
15 | 
16 |   /**
17 |    * Firefox fix, is="null" prevents attachedCallback
18 |    * @link https://github.com/WebReflection/document-register-element/issues/22
19 |    */
20 |   this.is = '';
21 |   this.removeAttribute('is');
22 |  } },
23 |  attachedCallback: { value: function() {
24 |   this.outerHTML = '<!--' + this.textContent + '-->';
25 |  } }
26 | });
27 | document.registerElement('react-comment', { prototype: proto });
28 | 


--------------------------------------------------------------------------------