{"id":18461776,"url":"https://github.com/georgegkas/super-react-gist","last_synced_at":"2025-08-21T02:31:04.734Z","repository":{"id":57374573,"uuid":"116044904","full_name":"GeorgeGkas/super-react-gist","owner":"GeorgeGkas","description":"Simple and flexible component that allows you to embed GitHub Gists in React projects.","archived":false,"fork":false,"pushed_at":"2024-09-16T12:15:47.000Z","size":843,"stargazers_count":18,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-30T10:56:53.158Z","etag":null,"topics":["all","component","embed","gist","github","react","react-component"],"latest_commit_sha":null,"homepage":"https://georgegkas.github.io/super-react-gist/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GeorgeGkas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-02T18:30:35.000Z","updated_at":"2024-11-18T18:11:53.000Z","dependencies_parsed_at":"2024-06-19T00:08:48.827Z","dependency_job_id":"5f7ea126-38fd-48d5-afa6-e5c2dd84a3dc","html_url":"https://github.com/GeorgeGkas/super-react-gist","commit_stats":{"total_commits":17,"total_committers":3,"mean_commits":5.666666666666667,"dds":"0.11764705882352944","last_synced_commit":"aff3d18a1e28d9463752709e20c632adb5b0b242"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/GeorgeGkas/super-react-gist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeGkas%2Fsuper-react-gist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeGkas%2Fsuper-react-gist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeGkas%2Fsuper-react-gist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeGkas%2Fsuper-react-gist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GeorgeGkas","download_url":"https://codeload.github.com/GeorgeGkas/super-react-gist/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeGkas%2Fsuper-react-gist/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271416733,"owners_count":24755942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["all","component","embed","gist","github","react","react-component"],"created_at":"2024-11-06T08:36:40.074Z","updated_at":"2025-08-21T02:31:04.402Z","avatar_url":"https://github.com/GeorgeGkas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# super-react-gist\nSimple and flexible component that allows you to embed [GitHub Gists](https://gist.github.com/) in [React](https://reactjs.org/) projects.\n\n## Features\n- Embed a **single file** from Gist repository!\n- Embed **multiple files** from multiple Gist repositories!\n- Embed the **whole Gist** repository!\n- **Easy usage**: Just copy-paste the Gist's repository URL to embed the whole repository, or copy-paste the permalink of an individual file to include just that.\n- Maximize Development Experience with **custom error handling**.\n- **Lightweight**: ~9KB minified (~4kb if gzipped).\n- Packaged as **UMD module** that can be loaded everywhere.\n- **Works both on secret and public repositories**.\n\n## Table of contents\n- [Installation](#installation)\n- [Component Properties](#component-properties)\n- [Examples](#examples)\n- [Browser Support](#browser-support)\n- [Bugs and feature requests](#bugs-and-feature-requests)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n### Through NPM\nTo install through npm run:\n\n```bash\nnpm i super-react-gist\n```\n### As UMD module\n**super-react-gist** comes as UMD module. This means you are able to use  **super-react-gist** component in your browser!\n\nTo get started add the following script tag in your html file:\n\n```html\n\u003cscript src=\"https://unpkg.com/super-react-gist/umd/super-react-gist.min.js\"\u003e\u003c/script\u003e\n```\n\n## Component Properties\n\n| Name               | Type        | Required | Description                                                                 |\n|:-------------------|:------------|:--------:|:----------------------------------------------------------------------------|\n| `url`              | *string*    |    ✅     | The URL of the Gist repository or the permalink of an individual gist file. |\n| `file`             | *string*    |          | Optional filename to include.                                               |\n| `onLoad`           | *function*  |          | Optional callback triggered on Gist load.                                   |\n| `onError`          | *function*  |          | Optional callback triggered on fetch error.                                 |\n| `LoadingComponent` | *Component* |          | Optional React component to render on Gist loading.                         |\n| `ErrorComponent`   | *Component* |          | Optional React component to render if Gist fetch fails.                     |\n\n## Examples\nThe following examples illustrate some basic features of the **super-react-gist** library.\n\n### Render one file\nWith **super-react-gist** you are able to render a single file from a gist repository.\n\n```javascript\n// Here is a little snippet to get you started!\nimport React from 'react'\nimport Gist from 'super-react-gist' // \u003c-- import the library\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eJust enter the file permalink to \u003cem\u003eurl\u003c/em\u003e prop.\u003c/p\u003e\n    \u003cGist url='https://gist.github.com/GeorgeGkas/5f55a83909a3f5b766934ffe802d30df#file-start-js' /\u003e\n  \u003c/div\u003e\n)\n```\n\n### Render multiple files\nYou are not restricted to use only one **Gist** component in your project.\n\n```javascript\nimport React from 'react'\nimport Gist from 'super-react-gist' // \u003c-- import the library\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eRendering multiple files is a piece of cake!\u003c/p\u003e\n    \u003cGist url='https://gist.github.com/GeorgeGkas/5f55a83909a3f5b766934ffe802d30df#file-start-js' /\u003e\n    \u003cGist url='https://gist.github.com/GeorgeGkas/5f55a83909a3f5b766934ffe802d30df#file-multiple-js' /\u003e\n  \u003c/div\u003e\n)\n```\n\n### Render using `file` prop\nOh 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!\n\n**Q**: How can we render this `CaMelCase.js` file?\n**A**: By providing a `file` prop to our `Gist` component to indicate which file we want to include.\n\nThis is how we do it:\n\n```javascript\nimport React from 'react'\nimport Gist from 'super-react-gist'\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eprovide the Gist url without including the file.\u003c/p\u003e\n    \u003cp\u003e...and pass the filename to `file` prop.\u003c/p\u003e\n    \u003cGist\n      url='https://gist.github.com/GeorgeGkas/5f55a83909a3f5b766934ffe802d30df'\n      file='CaMelCase.js'\n      /\u003e\n  \u003c/div\u003e\n)\n```\n\n### Render the whole Gist\nOf course, we can also embed the whole Gist repository just by copying the Gist URL.\n\n```javascript\nimport React from 'react'\nimport Gist from 'super-react-gist'\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eprovide the Gist URL without include any file.\u003c/p\u003e\n    \u003cGist url='https://gist.github.com/GeorgeGkas/5f55a83909a3f5b766934ffe802d30df' /\u003e\n  \u003c/div\u003e\n)\n```\n\n### Use a custom loading component\nMost of the times, we would like to render a custom React component while our Gists are loading.\n\n```javascript\nimport React from 'react'\nimport Gist from 'super-react-gist'\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eprovide the Gist URL without include any file.\u003c/p\u003e\n    \u003cGist \n      url='https://gist.github.com/GeorgeGkas/5f55a83909a3f5b766934ffe802d30df' \n      LoadingComponent={() =\u003e \u003cdiv\u003eWaiting for Gist...\u003c/div\u003e}\n    /\u003e\n  \u003c/div\u003e\n)\n```\n\n### Use a custom error component\nIn case that fetching fails, we can render a custom React Component to indicate the error.\n\n```javascript\nimport React from 'react'\nimport Gist from 'super-react-gist'\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eprovide the Gist URL without include any file.\u003c/p\u003e\n    \u003cGist \n      url='https://gist.github.com/GeorgeGkas/NOT_EXIST' \n      ErrorComponent={() =\u003e \u003cdiv\u003eCould not fetch component\u003c/div\u003e}\n    /\u003e\n  \u003c/div\u003e\n)\n```\n\n### Listen to error and loading events\nApart 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.\n\n```javascript\nimport React from 'react'\nimport Gist from 'super-react-gist'\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eprovide the Gist URL without include any file.\u003c/p\u003e\n    \u003cGist \n      url='https://gist.github.com/GeorgeGkas/NOT_EXIST' \n      οnLoad={() =\u003e console.log('Gist fetched successfully!')}\n      onError={() =\u003e console.log('Gist could not be fetched!')}\n    /\u003e\n  \u003c/div\u003e\n)\n```\n\n### Combine all the above techniques\n*This example is left as an exercise to the reader.*\n\n\n### Run the examples yourself\nClone the repo `git clone https://github.com/georgegkas/super-react-gist.git` and then run:\n\n```\n$ npm install\n$ npm start\n```\n\nThen you are able to access the `Gist` component using the `Gist`  global variable. [See this Pen for a demonstration](https://codepen.io/georgegkas/pen/zpzMzz).\n\n## Bugs and feature requests\nHave a bug or a feature request? [Please open a new issue](https://github.com/georgegkas/super-react-gist/issues).\n\n## Contributing\nPlease read through our contributing guidelines in [CONTRIBUTING.md](https://github.com/georgegkas/super-react-gist/blob/master/CONTRIBUTING.md) file.\n\nEditor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at [http://editorconfig.org](http://editorconfig.org).\n\n## License\nCode released under the [MIT License](https://opensource.org/licenses/MIT). See [LICENSE.md](https://github.com/georgegkas/super-react-gist/blob/master/LICENSE.md) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgegkas%2Fsuper-react-gist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeorgegkas%2Fsuper-react-gist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgegkas%2Fsuper-react-gist/lists"}