How to add (embed) Github Gist in React Js
Tags: react, github, javascript, webdev
Published: 2023-04-16 08:50:32

### [originally published on my website](https://democoding.netlify.app/post/how-to-add-gihub-gist-in-react-js)

---

There are two methods for adding Github gist in React js 
 
### 1. Using react-gist (NPM Package)

i. Install the react-gist package using npm 

```bash
npm install react-gist
```

ii. In your React.js component, import the **Gist** component from the **react-gist** package

```jsx
import React from 'react';
import Gist from 'react-gist';
```

iii. Use the **Gist** component in your React.js component by passing the **id** of the Gist as a prop:

```jsx
function GistComponent() {
  return (
    <div>
      <Gist id="gist-id-here" />
    </div>
  );
}

export default GistComponent;
```

iv. Replace the **gist-id-here** with the actual ID of the Gist you want to embed

---

### 2. Using react-frame-component

Another Way to add a Github Gist to a React.js application is by using the **react-frame-component** package

i. Install the **react-frame-component** package using NPM 

```bash
npm install react-frame-component
```

ii. In your React.js component, import the **Frame** component from the **react-frame-component** package

```bash
import React from 'react';
import Frame from 'react-frame-component';
```

iii. Add github gist link in gistUrl 


```bash
function GistComponent() {
  const gistUrl = 'https://gist.github.com/your-username/your-gist-id.js';

  return (
    <div>
      <Frame
        style={{ width: '100%', height: '100%' }}
        initialContent={`<!DOCTYPE html><html><head></head><body><script src="${gistUrl}"></script></body></html>`}
      />
    </div>
  );
}

export default GistComponent;
```

Read this [Blog post](https://democoding.netlify.app/post/how-to-add-gihub-gist-in-react-js) 


Note: The **react-frame-component** package has some limitations such as not being able to access the parent DOM or CSS styles.


### Thank You 🧡🧡



---
--- 
## Support us 
Don't miss the amazing video we've embedded in this post! Click the play button to be inspired

{% youtube 49s7aLqh-nk %}

---
---

### Best Post 

1. [How to create a Scroll to top button in React](https://democoding.netlify.app/post/how-to-create-a-scroll-to-top-button-in-react)

2. [Input Box Shake on Invalid Input](https://democoding.netlify.app/post/shake-on-invalid-input)


3. [CSS 3D Isometric Social Media Menu Hover Effects](https://democoding.netlify.app/post/css-3d-isometric-social-media-menu-hover-effects)

![CSS 3D Isometric Social Media Menu Hover Effects](https://camo.githubusercontent.com/ae671092ea8cd031abde235fae68d7a8111ec4868515fdbbea5f55f696c2e269/68747470733a2f2f692e6962622e636f2f636b314d636a6d2f657a6769662d636f6d2d63726f702e676966)


 
---
---

## For more information

 

1. Subscribe my Youtube Channel 
[https://www.youtube.com/@democode](https://www.youtube.com/@democode) 

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Follow me on Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Check out my Facebook Page 
[Programming memes by Coder](https://www.facebook.com/programmingmemesbycoders)

5. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

 

---
---

{% instagram CqObFa6PR0l %}

---

{% link https://dev.to/jon_snow789/30-free-css-loading-animation-for-your-website-in-2023-1j1a %}

---
 
---

### Use Our RSS Feed

```bash
 https://dev.to/feed/jon_snow789
```