How can I embed a Github Gist inside of a React component?

6
votes

I'm trying to use the Github Gist API to get all of my gists and embed them on a web page. Each Gist holds a blog post that I contain within the following component:

function BlogEntry(gist)  {
    return (
        <div>
            {gist.createdAt} {gist.id} {gist.description}
            <script src={"https://gist.github.com/seisvelas/" + gist.id + ".js"}></script>
        </div>
    );
}

The first line of the render'd div, {gist.createdAt} {gist.id} {gist.description} works, so I know I'm successfully interacting with the API. However, the second part with the script tag does nothing.

I tried this on a plain HTML document and he pattern <script src="https://gist.github.com/seisvelas/gist_id.js"></script> (which I got from the Gist website itself) does work given a valid gist_id.

I'd guess this has to do with how script tags behave in React components. It hadn't even occurred to me that this would be an issue. Could anyone recommend a simple workaround so I can get these Gists embedded successfully?

Thanks!

4
reactjsgist
Why are you embedding a <script> tag here? What do you expect this to do? Are you trying to run your gist in this page? Or do you want to just show the code itself? – Code-Apprentice
You need to use iframe instead of script. – Clarity
@Code-Apprentice I want to show the contents of the Gist – Alex V
@Clarity That doesn't work, which makes sense. The Gist embed link is a bunch of JS code. Importing it as an iframe won't do the same thing (I tried it, it just renders a blank iframe) – Alex V

4 Answers

2
votes

For anyone else who runs into this problem, I resolved it using the npm package react-embed-gist. It's dead simple and looks like this: 

import ReactEmbedGist from 'react-embed-gist';

// Only required attribute is gist
<ReactEmbedGist gist="msaracevic/5d757e2fc72482a9a4a439969500c2eb"
                wrapperClass="gist__bash"
                loadingClass="loading__screen"
                titleClass="gist__title"
                file=".bash_profile.sh"/>

Highly recommend!

2
votes

use this npm package, worked for me.

Step 1: Install the package

npm i react-gist

Step 2: import in your react component

import Gist from "react-gist";

Step 3: put your gist id

 <div>
     <Gist id="f824ffb7bafec535d0b6452179f2d790" />
 </div>

OR

 <div>
     <Gist id='f824ffb7bafec535d0b6452179f2d790' file='java-file' />
 </div>

if you have multiple files in the same gist

<Gist id={string} file={string} />

Where,

  • id {string} Id of the gist file

  • {string} Name of a specific file in a multi-file gist

1
votes

This solution lets you embed anything in an iFrame:

import Frame from 'react-frame-component';

<Frame  initialContent="<!DOCTYPE html><html><head></head><body><script src='https://gist.github.com/[YourUsername]/aa7101515bb1586857ca43beac8e0abc.js'></script></body></html>" />

Just replace the gist url in the code above with your own.

Frame component available at: https://www.npmjs.com/package/react-frame-component

0
votes

In HTML, a <script> tag embeds JavaScript code into the page to execute. It won't display the code from the URL specified in the src attribute.

The gist object from the Gist API contains all the data you need. Don't try to build the URL yourself. Instead, look at what else is in that gist object. For example, according to the documentation, gist.files is an object that contains information about each file in the gist. The keys in this object are the file names and those contain a content property gives the content of the file So if you have a file named hello.js, you can do gist.files['hello.js'].content. Since you probably don't know the file in advance, you can just loop over the keys of the gist.files object.

In general, when you are consuming an API, you should look carefully at the documentation to see what information it gives you.