tleunen/react-gist

Github Gist React component

react-gist

Use this component to add a github gist on your website.

Preview

Get the id from the gist url https://gist.github.com/{your_name}/{id} and set it as a property of the component.

Example

Single-file gist:

var React = require('react');
var Gist = require('react-gist');

React.render(
    <Gist id='5104372' />,
    document.body
);

Multi-file gist:

var React = require('react');
var Gist = require('react-gist');

React.render(
    <Gist id='5995ea726914f280afb3' file='Chef-Dockerfile' />,
    document.body
);

Usage

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

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

License

MIT, see LICENSE.md for details.

react-gist's Issues

Avoid using document.write()

Warning in console

index.js?c760:57 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write

Support a Dark Mode

Support react v18

Please can you support React 18 ?

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: xxxxxx npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"18.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"0.14.x || ^15.0.0-rc || ^16.0.0-rc || ^17.0.0-rc" from [email protected]

Support for a specific file in a gist

Github Gist's can contain multiple files. When you only want to include a specific file, there should be a second parameter allowing to pass the filename you want to see.

Here is an example of a multi-file gist:
https://gist.github.com/ringods/5995ea726914f280afb3

This gist is used in this static Hugo blog article:
https://ringo.de-smet.name/2015/03/keep-chef-out-of-your-docker-containers/

Could you extend the gist component to support the filename?

Feature Request: Parse id, username, filename from the Gist

Hi @tleunen, thank you for putting out this component!

I was wondering about your thoughts on the component accepting a gist url and then parsing information to show relevant gist/file?

I imagine that this would be a common enough use-case that a lot of people would be reinventing when they use this component.

Gist not showing up because of incorrect MIME type

Then adding a gist to my react app (created with create-react-app), it doesn't work:

MIME type (« application/json ») incorrect (X-Content-Type-Options: nosniff)