Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rodrigotomees/react-jsx-html-comments
Enable HTML comments and conditional IE comments in React components and JSX using a Web Component (W3C Custom Element).
https://github.com/rodrigotomees/react-jsx-html-comments
customelement html html-comments javascript jsx npm npm-package react web-components webcomponent webcomponents
Last synced: 3 days ago
JSON representation
Enable HTML comments and conditional IE comments in React components and JSX using a Web Component (W3C Custom Element).
- Host: GitHub
- URL: https://github.com/rodrigotomees/react-jsx-html-comments
- Owner: RodrigoTomeES
- License: mit
- Created: 2020-03-10T09:32:12.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-03-12T10:18:54.000Z (over 4 years ago)
- Last Synced: 2024-09-20T03:01:36.469Z (8 days ago)
- Topics: customelement, html, html-comments, javascript, jsx, npm, npm-package, react, web-components, webcomponent, webcomponents
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/RodrigoTomeES/react-jsx-html-comments/blob/master/LICENSE)
[](https://badge.fury.io/js/react-jsx-html-comments)
# React / JSX HTML Comments
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).
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](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).
You can read more about Web Components at [www.webcomponents.org](http://webcomponents.org/), [facebook.github.io/react/docs/webcomponents.html](https://facebook.github.io/react/docs/webcomponents.html) and [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
Include the following javascript in your application to enable the `` Web Component.
```javascript
/**
* Web Component
*
* @usage
* Comment-text, e.g. [if lte IE 9]>
* @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](https://www.npmjs.com/package/react-jsx-html-comments).
### Install
#### NPM
Use the following command in your directory to use and save the npm package. This will put index.js inside `node_modules/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.
### Import
#### 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
```
### Use
#### JSX
```jsx
Copyright {year}, Website.com
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](https://github.com/optimalisatie) to the new Custom Elements API V1 that does **NOT** require polyfill, you can see the original code [here](https://github.com/optimalisatie/react-jsx-html-comments).