originally published on my website
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
npm install react-gist
ii. In your React.js component, import the Gist component from the react-gist package
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:
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
npm install react-frame-component
ii. In your React.js component, import the Frame component from the react-frame-component package
import React from 'react';
import Frame from 'react-frame-component';
iii. Add github gist link in gistUrl
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
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
Best Post
For more information
Subscribe my Youtube Channel
https://www.youtube.com/@democodeCheck out my Fiver profile if you need any freelancing work
https://www.fiverr.com/amit_sharma77Follow me on Instagram
https://www.instagram.com/fromgoodthings/Check out my Facebook Page
Programming memes by CoderLinktree
https://linktr.ee/jonSnow77
Use Our RSS Feed
https://dev.to/feed/jon_snow789
Top comments (0)