Simple and flexible component that allows you to embed GitHub Gists in React projects.
npm install super-react-gistbash
npm i super-react-gist
`
$3
super-react-gist comes as UMD module. This means you are able to use super-react-gist component in your browser!
To get started add the following script tag in your html file:
`html
`
Component Properties
| Name | Type | Required | Description |
| :--- | :--- | :---: | :--- |
| url | string |✅ | The URL of the Gist repository or the permalink of an individual gist file. |
| file | string | | Optional filename to include. |
| onLoad | function | | Optional callback triggered on Gist load. |
| onError | function | | Optional callback triggered on fetch error. |
| LoadingComponent | Component | | Optional React component to render on Gist loading. |
| ErrorComponent | Component || Optional React component to render if Gist fetch fails. |
Examples
The following examples illustrate some basic features of the super-react-gist library.
$3
With super-react-gist you are able to render a single file from a gist repository.
`javascript
// Here is a little snippet to get you started!
import React from 'react'
import Gist from 'super-react-gist' // <-- import the library
const MyComponent = () => (
Just enter the file permalink to url prop.
)
`
$3
You are not restricted to use only one Gist component in your project.
`javascript
import React from 'react'
import Gist from 'super-react-gist' // <-- import the library
const MyComponent = () => (
Rendering multiple files is a piece of cake!
)
`
$3
Oh snap! face-palm! In case you didn't notice we can only use the above method to render files that do not contain any uppercase letter. For instance, if our Gist repo contains a file CaMelCase.js, then providing just the permalink will not work!
Q: How can we render this CaMelCase.js file?
A: By providing a file prop to our Gist component to indicate which file we want to include.
This is how we do it:
`javascript
import React from 'react'
import Gist from 'super-react-gist'
const MyComponent = () => (
provide the Gist url without including the file.
...and pass the filename to file prop.
file='CaMelCase.js'
/>
)
`
$3
Of course, we can also embed the whole Gist repository just by copying the Gist URL.
`javascript
import React from 'react'
import Gist from 'super-react-gist'
const MyComponent = () => (
provide the Gist URL without include any file.
)
`
$3
Most of the times, we would like to render a custom React component while our Gists are loading.
`javascript
import React from 'react'
import Gist from 'super-react-gist'
const MyComponent = () => (
provide the Gist URL without include any file.
LoadingComponent={() => Waiting for Gist...}
/>
)
`
$3
In case that fetching fails, we can render a custom React Component to indicate the error.
`javascript
import React from 'react'
import Gist from 'super-react-gist'
const MyComponent = () => (
provide the Gist URL without include any file.
ErrorComponent={() => Could not fetch component}
/>
)
`
$3
Apart from providing a custom error or loading component, we can also register the corresponding callbacks. The onLoad callback is executed when the Gist is fetched successfully, while onError callback is executed if could not retrieve the requested Gist.
`javascript
import React from 'react'
import Gist from 'super-react-gist'
const MyComponent = () => (
provide the Gist URL without include any file.
οnLoad={() => console.log('Gist fetched successfully!')}
onError={() => console.log('Gist could not be fetched!')}
/>
)
`
$3
This example is left as an exercise to the reader.
$3
Clone the repo git clone https://github.com/georgegkas/super-react-gist.git and then run:
`
$ npm install
$ npm start
`
Then you are able to access the Gist component using the Gist` global variable. See this Pen for a demonstration.