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;

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