https://github.com/dwjohnston/react-github-permalink
A react component to display github permalinks
https://github.com/dwjohnston/react-github-permalink
library react react-server-components
Last synced: 6 days ago
JSON representation
A react component to display github permalinks
- Host: GitHub
- URL: https://github.com/dwjohnston/react-github-permalink
- Owner: dwjohnston
- License: mit
- Created: 2023-10-19T01:18:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-16T22:56:04.000Z (2 months ago)
- Last Synced: 2025-11-17T00:20:06.090Z (2 months ago)
- Topics: library, react, react-server-components
- Language: TypeScript
- Homepage:
- Size: 4.56 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Github Permalink
Display Github permalinks as codeblocks.
Display Github issue links.
I 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.
## Demo
https://codesandbox.io/s/exciting-nova-js5zlk?file=/src/App.js
## Language Support
Langauge 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).
If this does not suit you, you can override the autodetected langauage with the `language` prop.
## RSC Compatibility / Three modes of operation
This package is compatible with Next 13+ and the components can be used as RSCs if you wish.
Three variants of each component are exported
- 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.
- GithubPermalinkBase/GithubIssueLinkBase - this is the base component - it does no data fetching on its own.
- GithubPermalinkRsc/GithubIssueLinkRsc - This is an RSC.
### Basic usage (Client component)
```jsx
import { GithubPermalink } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css"; // Or provide your own styles
export function MyApp() {
return
}
```
### Provide your own data
```jsx
import { GithubPermalinkBase } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css"; // Or provide your own styles
export function MyApp() {
return
}
```
You may wish you use this approach if my approach for configuration does not work for you
### RSC
```jsx
import { GithubPermalinkRsc } from 'react-github-permalink/dist/rsc';
import "react-github-permalink/dist/github-permalink.css"; // Or provide your own styles
export function MyApp() {
return
}
```
Note that import path is different.
## Github Issuelink
### Usage
```jsx
import { GithubPermalink } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css"; // Or provide your own styles
export function MyApp() {
return ,
}
```
IssueLink also has an inline variant:
```jsx
export function MyApp() {
return ,
}
```
## Rate Limits and Authentication
By 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.
If you need to avoid rate limits or allow users to view private repos, you can implement your own data fetching function.
## Configuration
The global configuration object has this signature
```ts
type BaseConfiguration = {
getDataFn: (permalink: string, githubToken?: string | undefined, onError?: ((err: unknown) => void) | undefined) => Promise;
getIssueFn: (issueLink: string, githubToken?: string | undefined, onError?: ((err: unknown) => void) | undefined) => Promise;
githubToken: string | undefined;
onError: ((e: unknown) => void) | undefined;
}
```
### Configure client components via GithubPermalinkProvider
Client components are configured via context provider:
```tsx
import { GithubPermalink, GithubIssueLink GithubPermalinkProvider, } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";
export function MyApp() {
return {
// Your implementation to retrieve permalinks here
}}
getIssueFn={(issueLink: string) => {
// Your implementation to retrieve issue links here
}}
// Don't put a put a github token into the context provider in production! It will visible for all the world to see!
// Instead you will need to expose a data fetching function on the backend to do it for you
githubToken={process.env.NODE_ENV='development' && process.env.MY_GITHUB_TOKEN}
onError={(err) => {
Sentry.captureException(err);
}}
>
}
```
### Configure RSC components via githubPermalinkRscConfig singleton
In a Next.js 13+ app using the app router, I recommend configuring the `githubPermalinkRscConfig` object in your route level `layout.tsx` file.
```tsx
import "react-github-permalink/dist/github-permalink.css";
import {githubPermalinkRscConfig} from "react-github-permalink/dist/rsc";
githubPermalinkRscConfig.setConfig({
githubToken: process.env.GITHUB_TOKEN
})
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// your layout component here
}
```