{"id":40514057,"url":"https://github.com/dwjohnston/react-github-permalink","last_synced_at":"2026-01-20T20:32:26.253Z","repository":{"id":201128550,"uuid":"706975227","full_name":"dwjohnston/react-github-permalink","owner":"dwjohnston","description":"A react component to display github permalinks","archived":false,"fork":false,"pushed_at":"2025-11-16T22:56:04.000Z","size":4786,"stargazers_count":2,"open_issues_count":26,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-17T00:20:06.090Z","etag":null,"topics":["library","react","react-server-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/dwjohnston.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-10-19T01:18:27.000Z","updated_at":"2025-10-08T10:17:43.000Z","dependencies_parsed_at":"2024-08-07T10:41:07.819Z","dependency_job_id":"0f73b0a6-5925-4297-80ee-5851d81aac5a","html_url":"https://github.com/dwjohnston/react-github-permalink","commit_stats":null,"previous_names":["dwjohnston/react-github-permalink"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/dwjohnston/react-github-permalink","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwjohnston%2Freact-github-permalink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwjohnston%2Freact-github-permalink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwjohnston%2Freact-github-permalink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwjohnston%2Freact-github-permalink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwjohnston","download_url":"https://codeload.github.com/dwjohnston/react-github-permalink/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwjohnston%2Freact-github-permalink/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28612912,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T18:56:40.769Z","status":"ssl_error","status_checked_at":"2026-01-20T18:54:26.653Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["library","react","react-server-components"],"created_at":"2026-01-20T20:32:26.199Z","updated_at":"2026-01-20T20:32:26.246Z","avatar_url":"https://github.com/dwjohnston.png","language":"TypeScript","readme":"# React Github Permalink\n\nDisplay Github permalinks as codeblocks. \n\nDisplay Github issue links. \n\n![screenshot of the tool in action - dark mode ](./screenshot-permalink-dark.png)\n![screenshot of the tool in action - light mode ](./screenshot-permalink-light.png)\n![screenshot of the tool in action - dark mode ](./screenshot-issuelink-dark.png)\n![screenshot of the tool in action - light mode ](./screenshot-issuelink-light.png)\n![screenshot of the tool in action - dark mode - inline ](./screenshot-issuelink-inline-dark.png)\n![screenshot of the tool in action - light mode - inline ](./screenshot-issuelink-inline-light.png)\n\n\n\n\nI highly rate the [`vscode-copy-github-permalink` plugin](https://marketplace.visualstudio.com/items?itemName=hogashi.vscode-copy-github-permalink) for ease in generating the permalinks from within VSCode.\n\n## Demo\n\nhttps://codesandbox.io/s/exciting-nova-js5zlk?file=/src/App.js\n\n\n## Language Support\n\nLangauge is naively auto detected based on file extension. See [logic here for all auto-detected languages](https://github.com/dwjohnston/react-github-permalink/pull/73/files#diff-b6feb43e40d6eae1cba733450d691be8f83a1a50ecbff1b890cd343b2039ece1).\n\nIf this does not suit you, you can override the autodetected langauage with the `language` prop. \n\n\n\n\n## RSC Compatibility / Three modes of operation\n\nThis package is compatible with Next 13+ and the components can be used as RSCs if you wish. \n\nThree variants of each component are exported\n\n - GithubPermalink/GithubIssueLink - Client component - It fetches the data as on the client in a useEffect. ie. Data won't be retrieved until application has loaded in user's browser.   \n - GithubPermalinkBase/GithubIssueLinkBase - this is the base component - it does no data fetching on its own. \n - GithubPermalinkRsc/GithubIssueLinkRsc - This is an RSC. \n\n\n\n\n### Basic usage (Client component) \n```jsx\nimport { GithubPermalink } from 'react-github-permalink';\nimport \"react-github-permalink/dist/github-permalink.css\"; // Or provide your own styles\n\nexport function MyApp() {\n    return  \u003cGithubPermalink permalink=\"https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5\"/\u003e\n}\n```\n\n\n### Provide your own data\n\n```jsx\nimport { GithubPermalinkBase } from 'react-github-permalink';\nimport \"react-github-permalink/dist/github-permalink.css\"; // Or provide your own styles\n\nexport function MyApp() {\n    return          \u003cGithubPermalinkBase\n            permalink=\"https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5\"\n            data={{\n                lines: [\n                    \"package main\",\n                    \"import \\\"fmt\\\"\",\n                    \"func main() {\",\n                    \"    fmt.Println(\\\"hello world\\\")\",\n                    \"}\"\n                ],\n                lineFrom: 1,\n                lineTo: 5,\n                commit: \"5b15aa07e60af4e317086f391b28cadf9aae8e1b\",\n                path: \"sample_files/sample1.go\",\n                owner: \"dwjohnston\",\n                repo: \"react-github-permalink\",\n                commitUrl: \"https://github.com/dwjohnston/react-github-permalink/commit/5b15aa07e60af4e317086f391b28cadf9aae8e1b\",\n                status: \"ok\"\n            }} /\u003e\n}\n```\n\nYou may wish you use this approach if my approach for configuration does not work for you \n\n### RSC\n\n\n```jsx\nimport { GithubPermalinkRsc } from 'react-github-permalink/dist/rsc';\nimport \"react-github-permalink/dist/github-permalink.css\"; // Or provide your own styles\n\nexport function MyApp() {\n    return  \u003cGithubPermalinkRsc permalink=\"https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5\"/\u003e\n}\n```\n\nNote that import path is different. \n\n\n## Github Issuelink\n\n### Usage\n```jsx\nimport { GithubPermalink } from 'react-github-permalink';\nimport \"react-github-permalink/dist/github-permalink.css\"; // Or provide your own styles\n\nexport function MyApp() {\n    return  \u003cGithubIssueLink issueLink='https://github.com/dwjohnston/react-github-permalink/issues/2' /\u003e,\n}\n```\n\n\nIssueLink also has an inline variant: \n\n```jsx\nexport function MyApp() {\n    return  \u003cGithubIssueLink issueLink='https://github.com/dwjohnston/react-github-permalink/issues/2' variant=\"inline\"/\u003e,\n}\n```\n\n## Rate Limits and Authentication\n\nBy default the components make unauthenticated requests against Github's API. The rate limit for such requests is 60/hour and only publicly visible repositories are available. \n\nIf you need to avoid rate limits or allow users to view private repos, you can implement your own data fetching function. \n\n## Configuration \n\nThe global configuration object has this signature\n\n```ts\ntype BaseConfiguration = {\n    getDataFn: (permalink: string, githubToken?: string | undefined, onError?: ((err: unknown) =\u003e void) | undefined) =\u003e Promise\u003cGithubPermalinkDataResponse\u003e;\n    getIssueFn: (issueLink: string, githubToken?: string | undefined, onError?: ((err: unknown) =\u003e void) | undefined) =\u003e Promise\u003cGithubIssueLinkDataResponse\u003e;\n    githubToken: string | undefined;\n    onError: ((e: unknown) =\u003e void) | undefined;\n}\n```\n\n### Configure client components via GithubPermalinkProvider\n\nClient components are configured via context provider: \n\n```tsx\nimport { GithubPermalink, GithubIssueLink GithubPermalinkProvider,  } from 'react-github-permalink';\nimport \"react-github-permalink/dist/github-permalink.css\";\n\nexport function MyApp() {\n    return \u003cGithubPermalinkProvider \n        getDataFn ={(permalink: string) =\u003e {\n            // Your implementation to retrieve permalinks here \n        }}\n        getIssueFn={(issueLink: string) =\u003e {\n            // Your implementation to retrieve issue links here\n        }}\n\n        // Don't put a put a github token into the context provider in production! It will visible for all the world to see!\n        // Instead you will need to expose a data fetching function on the backend to do it for you \n        githubToken={process.env.NODE_ENV='development' \u0026\u0026 process.env.MY_GITHUB_TOKEN}\n\n        onError={(err) =\u003e {\n            Sentry.captureException(err);\n        }}\n    \u003e  \n        \u003cGithubPermalink permalink=\"https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5\"/\u003e\n        \u003cGithubIssueLink issueLink='https://github.com/dwjohnston/react-github-permalink/issues/2' /\u003e\n    \u003c/GithubPermalinkProvider\u003e\n}    \n```\n\n### Configure RSC components via githubPermalinkRscConfig singleton\n\nIn a Next.js 13+ app using the app router, I recommend configuring the `githubPermalinkRscConfig` object in your route level `layout.tsx` file. \n\n```tsx\n\nimport \"react-github-permalink/dist/github-permalink.css\";\nimport {githubPermalinkRscConfig} from \"react-github-permalink/dist/rsc\";\ngithubPermalinkRscConfig.setConfig({\n  githubToken: process.env.GITHUB_TOKEN\n})\n\nexport default function RootLayout({\n  children,\n}: Readonly\u003c{\n  children: React.ReactNode;\n}\u003e) {\n   // your layout component here \n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwjohnston%2Freact-github-permalink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwjohnston%2Freact-github-permalink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwjohnston%2Freact-github-permalink/lists"}