Skip to content

Instantly share code, notes, and snippets.

@alexeychikk
Last active September 5, 2022 17:35
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save alexeychikk/bfe72a072a9a962f2da900b6151e4aae to your computer and use it in GitHub Desktop.
Save alexeychikk/bfe72a072a9a962f2da900b6151e4aae to your computer and use it in GitHub Desktop.
Simple React HTML comment
/*
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;
@certainlyakey
Copy link

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

@Zneider
Copy link

Zneider commented Feb 18, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment