Generate embedded gist within html string retrieved from Firebase - React

Question

I have a Post component which will set the innerHtml using content retrieved from Firebase.

render() {
    return (
        <Panel>
            <Image src={this.state.img} alt={this.state.title} />
            <h2>{this.state.title}</h2>
            <p className='date'>{this.state.name}</p>
            <div className='text' ref='post'>
                <div dangerouslySetInnerHTML={{__html: this.state.content}} />
            </div>
        </Panel>
    )

The content to be displayed is stored in firebase as such:

{
      "id": 11,
      "title": "The Earth",
      "slug": "the-lazy-mans-guide-to-anything-about-princess",
      "img": "https://hd.unsplash.com/photo-1467321638755-7246fd0dc1f3",
      "summary": "<p>In as name to here them deny wise this. As rapid woody my he me which. Men but they fail shew just wish next put. Led all visitor musical calling nor her. Within coming figure sex things are. Pretended concluded did repulsive education smallness yet yet described. Had country man his pressed shewing. No gate dare rose he. Eyes year if miss he as upon.</p>",
      "content": "<p>In as name to here them deny wise this........

However, because React will not evaluate a script tag within the 'content', I cannot embed a gist. I've tried a couple alternatives but looking for suggestions.

Answer 1

Sorry for the delayed answer. Here you go:

First, lets see why embedding a script tag inside a React Component won't work. Michelle Tilley gave a very good answer to this question.

The Gist embed script uses document.write to write the HTML that makes up the embedded Gist into the document's HTML. However, by the time your React component adds the script tag, it's too late to write to the document.

-- taken from here

If you want to embed a Gist inside your page, you'll have to get the content's of the Gist and render them inside the document yourself. There are many components on the internet for that particular job. Here is one I made and use for my own projects: super-react-app

Then you are able to use that component in your project like so:

render() {
  return (
    <Panel>
      <Image src={this.state.img} alt={this.state.title} />
      <h2>{this.state.title}</h2>
      <p className='date'>{this.state.name}</p>
      <div className='text' ref='post'>

      {/* provide the url of the gist repository or the permalink of a gist file and you are ready to go */}
      <Gist url={this.state.content} />


      </div>
    </Panel>
  )
}

You just have to save the Gist's url in the object content property, something like:

{
  "id": 11,
  "title": "The Earth",
  "slug": "the-lazy-mans-guide-to-anything-about-princess",
  "img": "https://hd.unsplash.com/photo-1467321638755-7246fd0dc1f3",
  "summary": "<p>In as name to here them deny wise this. As rapid woody my he me which. Men but they fail shew just wish next put. Led all visitor musical calling nor her. Within coming figure sex things are. Pretended concluded did repulsive education smallness yet yet described. Had country man his pressed shewing. No gate dare rose he. Eyes year if miss he as upon.</p>",

  "content": "https://gist.github.com/oneUser/5f55a83909a3fsb766934ffe802930df"

}

Also the above tool comes as UMD module that are ready to be used in your browser if you do not use a package manager. See the project's GitHub for more examples.