Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 16, 2023 08:50 am GMT

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-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

Original Link: https://dev.to/jon_snow789/how-to-add-github-gist-in-react-js-4937

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To