Now with issue links!
Given a Github permalink, show the code block.
import { GithubPermalink } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css"; // Or provide your own styles
export function MyApp() {
return <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5"/>
}
I also highly rate the vscode-copy-github-permalink
plugin which makes for ease in generating the permalinks from within VSCode.
import { GithubPermalink } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css"; // Or provide your own styles
export function MyApp() {
return <GithubIssueLink issueLink='https://github.com/dwjohnston/react-github-permalink/issues/2' />,
}
https://codesandbox.io/s/exciting-nova-js5zlk?file=/src/App.js
This component makes 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.
You can provide your own data fetching function via a context provider.
import { GithubPermalink, GithubPermalinkContext } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";
export function MyApp() {
return <GithubPermalinkProvider getDataFn ={(permalink: string) => {
// Your implementation to retrieve permalinks here
}}
getIssueFn={(issueLink: string) => {
// Your implementation to retrieve issue links here
}}
>
<GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5"/>
<GithubIssueLink issueLink='https://github.com/dwjohnston/react-github-permalink/issues/2' />
</GithubPermalinkProvider>
}
In development you may find yourself hitting the API rate limit rather quickly, and this can be pain.
You can provide a Github token to avoid this.
Do not use your private tokens in production, they will be public for the world to see!
import { GithubPermalink, GithubPermalinkContext } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";
export function MyApp() {
return <GithubPermalinkProvider githubToken={process.env.NODE_ENV='development' && process.env.MY_GITHUB_TOKEN}>
<GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5"/>
</GithubPermalinkProvider>
}
It might be helpful to know if users are encountering API errors, for example if they are being rate limited.
The onError
property can allow you to report these errors to sentry for example.
<GithubPermalinkProvider onError={(err) => {
Sentry.captureException(err);
}}>
</GithubPermalinkProvider>