Simple React HTML comment

ReactComment.jsx

/*
  Usage (I however think that the code is self explanatory)
  
  <ReactComment text={`
      Very long comment with html link
      <a href="https://gist.github.com/alexeychikk/bfe72a072a9a962f2da900b6151e4aae">Star me :)</a>
  `} />
*/

import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';

class ReactComment extends Component {
    static propTypes = {
        text: PropTypes.string,
        trim: PropTypes.bool
    };

    static defaultProps = {
        trim: true
    };

    componentDidMount() {
        let el = ReactDOM.findDOMNode(this);
        ReactDOM.unmountComponentAtNode(el);
        el.outerHTML = this.createComment();
    }

    createComment() {
        let text = this.props.text;

        if (this.props.trim) {
            text = text.trim();
        }

        return `<!-- ${text} -->`;
    }

    render() {
        return <div />;
    }
}

export default ReactComment;

Meh :/
What's the point of dynamically generating comments?
Either the comments are for humans (and they'd be JSX comments) or for the browsers, like the IE conditional comments (and we need them to appear even before the html tag).

Look up how InfoLinks asks you to help them determine where to insert Ads.

Just as a note, this does not work when using renderToStaticMarkup of react-dom/server, because componentDidMount does not get triggered. For reference: facebook/react#16931

For me generating comments is required, not only "inside the browser" but when using react as some part of static-file-generation outside of the browser.

Just as a note, this does not work when using renderToStaticMarkup of react-dom/server, because componentDidMount does not get triggered. For reference: facebook/react#16931

For me generating comments is required, not only "inside the browser" but when using react as some part of static-file-generation outside of the browser.

Try this https://stackoverflow.com/a/56136178/4373305

@alexeychikk That won't work, as it always creates a wrapper-element

This causes a crash for me when navigating with react-router-dom to a component where ReactComment is not used.

I have made an npm package for this: https://www.npmjs.com/package/react-html-comment