Enable HTML comments and conditional IE comments in React components and JSX using a Web Component (W3C Custom Element).
npm install react-jsx-html-comments
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.
The solution use the native Custom Elements V1 API so it does NOT depends on document.registerElement that requires a polyfill for most browsers, e.g. WebReflection/document-register-element.
You can read more about Web Components at www.webcomponents.org, facebook.github.io/react/docs/webcomponents.html and developer.mozilla.org.
Include the following javascript in your application to enable the
``javascript
/**
*
*
* @usage
*
* @result
*
*/
class ReactComment extends window.HTMLElement {
get name () {
return 'React HTML Comment'
}
connectedCallback () {
/**
* Firefox fix, is="null" prevents attachedCallback
* @link https://github.com/WebReflection/document-register-element/issues/22
*/
this.is = ''
this.removeAttribute('is')
this.outerHTML = ''
}
}
window.customElements.define('react-comment', ReactComment)
`
To include a comment in your JSX or React component, simply include the tag with the comment-text as content and import index.js (you can rename the file) or use the npm package react-jsx-html-comments.
of your project.
`
npm install --save react-jsx-html-comments
#### Vanilla JavaScript
Download the index.js file (rename if you want) and save it in your proyect.
$3
#### NPM
If you're working with a tool like Browserify, Webpack, RequireJS, etc, you can import the script at some point before you need to use the API.javascript
import 'react-jsx-html-comments' // ES2015
// or
require('react-jsx-html-comments') // CommonJS
// or
define(['react-jsx-html-comments'], function() {}) // AMD
`#### Vanilla JavaScript
If you're not using a module system, just place index.js (rename if you want) somewhere where it will be served by your server, then put:
html
`$3
#### JSX
jsx
Page loaded in {loadtime} seconds
`#### React component / element
javascript
var MyComponent = React.createClass({
render: function() {
return React.createElement('react-comment',{},'This is sample comment text.');
}
});
``This solution is a migration of the code from optimalisatie to the new Custom Elements API V1 that does NOT require polyfill, you can see the original code here.