React Github Permalink

Display Github permalinks as codeblocks and Github issue links in your React applications.

📦 Installation

npm install react-github-permalink

Also install the peer dependency: npm install react

⚛️ React Server Components (RSC)

This package is compatible with Next.js 13+ and offers three variants of each component:

GithubPermalink/GithubIssueLink - Client component that fetches data in useEffect
GithubPermalinkBase/GithubIssueLinkBase - Base component with no data fetching
GithubPermalinkRsc/GithubIssueLinkRsc - React Server Component

Client Component Usage

import { GithubPermalink } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";

export function MyApp() {
  return (
    <GithubPermalink 
      permalink="https://github.com/dwjohnston/react-github-permalink/blob/main/sample_files/sample1.go#L1-L5"
    />
  );
}

RSC Usage

import { GithubPermalinkRsc } from 'react-github-permalink/dist/rsc';
import "react-github-permalink/dist/github-permalink.css";

export function MyApp() {
  return (
    <GithubPermalinkRsc 
      permalink="https://github.com/dwjohnston/react-github-permalink/blob/main/sample_files/sample1.go#L1-L5"
    />
  );
}

Base Component with Custom Data

import { GithubPermalinkBase } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";

export function MyApp() {
  return (
    <GithubPermalinkBase
      permalink="https://github.com/dwjohnston/react-github-permalink/blob/main/sample_files/sample1.go#L1-L5"
      data={{
        lines: [
          "package main",
          "import \"fmt\"",
          "func main() {",
          "    fmt.Println(\"hello world\")",
          "}"
        ],
        lineFrom: 1,
        lineTo: 5,
        commit: "5b15aa07e60af4e317086f391b28cadf9aae8e1b",
        path: "sample_files/sample1.go",
        owner: "dwjohnston",
        repo: "react-github-permalink",
        status: "ok"
      }}
    />
  );
}

🚀 Demo Usage

Try out the components in this interactive CodeSandbox demo:

🔗 Open Interactive Demo

Issue Links

You can also display GitHub issue links with status and reactions:

import { GithubIssueLink } from 'react-github-permalink';

// Block variant (default)
<GithubIssueLink issueLink="https://github.com/dwjohnston/react-github-permalink/issues/2" />

// Inline variant
<GithubIssueLink 
  issueLink="https://github.com/dwjohnston/react-github-permalink/issues/2" 
  variant="inline"
/>

📚 Resources

📖 View Storybook 🛠️ Package Template

✨ Features

🎨 Syntax Highlighting

Beautiful code highlighting with automatic language detection

🌙 Dark Mode

Automatic dark/light mode support based on user preference

📱 Responsive

Mobile-friendly design that works on all screen sizes

⚡ RSC Compatible

Full support for React Server Components in Next.js 13+

📋 Copy to Clipboard

One-click copying of code snippets

🔗 Issue Links

Display GitHub issues with status, reactions, and metadata