React Git History Viewer

A React component that displays git version information and provides an interactive git history browser for development environments.

Features

• Dynamic Versioning: A CLI tool to generate a major.minor version number based on the total number of git commits.
• Environment-Specific Display: Shows only a minimal version badge in production and a full interactive panel in development.
• Framework Agnostic Component: The core component can be used in any React project. An example API handler for Next.js is provided.

Installation

npm install react-git-history-viewer

How to Use (Next.js App Router Example)

Step 1: Add the Version Script

In your project's package.json, add a script to generate the version file using the package's built-in CLI.

"scripts": {
  "version": "create-git-version"
}

Step 2: Generate the Version File

Before committing and deploying your code, run the version script. This will create a version.json file in your public directory.

npm run version

Important: You must commit the generated public/version.json file to your repository.

Step 3: Set up the API Handler

The interactive panel requires an API endpoint to fetch git data.

1. Create a new API route in your project at app/api/git-history/route.ts.
2. Import and use the gitHistoryHandler from the package.

// app/api/git-history/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { gitHistoryHandler } from 'react-git-history-viewer/dist/api-handler';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const author = searchParams.get('author') || undefined;
  const hash = searchParams.get('hash') || undefined;

  const result = await gitHistoryHandler({ author, hash });
  
  return NextResponse.json(result.body, { status: result.status });
}

Step 4: Use the Component in Your App

Import and render the GitHistoryViewer component in a Client Component.

'use client';

import { GitHistoryViewer } from 'react-git-history-viewer';

export default function MyLayout({ children }) {
  return (
    <div>
      {/* Your app content */}
      
      <GitHistoryViewer 
        apiBasePath="/api" 
        devMode={process.env.NODE_ENV === 'development'} 
      />
    </div>
  );
}

Props

• apiBasePath (string, required): The base path for your API routes (e.g., /api).
• devMode (boolean, optional, default: false): Set to true to enable the interactive history panel. It is highly recommended to tie this to an environment variable like process.env.NODE_ENV === 'development'.