How to add Github 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

npm install react-gist

ii. In your React.js component, import the Gist component from the react-…


This content originally appeared on DEV Community and was authored by Jon Snow

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

  1. How to create a Scroll to top button in React

  2. CSS 3D Isometric Social Media Menu Hover Effects

  3. Input Box Shake on Invalid Input

For more information

  1. Subscribe my Youtube Channel
    https://www.youtube.com/@democode

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

  3. Follow me on Instagram
    https://www.instagram.com/fromgoodthings/

  4. Check out my Facebook Page
    Programming memes by Coder

  5. Linktree
    https://linktr.ee/jonSnow77

jon_snow789

30 Free CSS Loading Animation for your website in 2023

Jon Snow ・ Apr 15 ・ 5 min read

#css #webdev #javascript #productivity

Use Our RSS Feed 

 https://dev.to/feed/jon_snow789


This content originally appeared on DEV Community and was authored by Jon Snow


Print Share Comment Cite Upload Translate Updates
APA

Jon Snow | Sciencx (2023-04-16T08:50:32+00:00) How to add Github Gist in React Js. Retrieved from https://www.scien.cx/2023/04/16/how-to-add-github-gist-in-react-js/

MLA
" » How to add Github Gist in React Js." Jon Snow | Sciencx - Sunday April 16, 2023, https://www.scien.cx/2023/04/16/how-to-add-github-gist-in-react-js/
HARVARD
Jon Snow | Sciencx Sunday April 16, 2023 » How to add Github Gist in React Js., viewed ,<https://www.scien.cx/2023/04/16/how-to-add-github-gist-in-react-js/>
VANCOUVER
Jon Snow | Sciencx - » How to add Github Gist in React Js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/16/how-to-add-github-gist-in-react-js/
CHICAGO
" » How to add Github Gist in React Js." Jon Snow | Sciencx - Accessed . https://www.scien.cx/2023/04/16/how-to-add-github-gist-in-react-js/
IEEE
" » How to add Github Gist in React Js." Jon Snow | Sciencx [Online]. Available: https://www.scien.cx/2023/04/16/how-to-add-github-gist-in-react-js/. [Accessed: ]
rf:citation
» How to add Github Gist in React Js | Jon Snow | Sciencx | https://www.scien.cx/2023/04/16/how-to-add-github-gist-in-react-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts