git-commit-tree

English | 简体中文

A performant and customizable React component for visualizing git commit history as a graph, similar to GitHub's network graph or SourceTree.

Features

• 🎨 GitHub-like Design: Clean and familiar visual style with branch coloring.
• 🚀 High Performance: Built-in virtual scrolling to handle thousands of commits smoothly.
• 🌲 SVG Rendering: Crisp and scalable graph visualization using SVG.
• 🖱️ Interactive: Hover effects, selection support, and tooltip for long commit messages.
• 📏 Responsive: Auto-calculates layout width and adapts to container size.
• ⚡ Lazy Loading: Supports infinite scrolling / loading more commits on demand.

Installation

npm install @hayrsiane/git-commit-tree

Usage

import React from 'react';
import { GitCommitTree, Commit } from '@hayrsiane/git-commit-tree';

const App = () => {
  const commits: Commit[] = [
    {
      hash: '9b0c2b6',
      parents: ['a1b2c3d'],
      author: {
        name: 'Alice',
        email: '[email protected]',
        timestamp: 1672531200,
      },
      message: 'Fix bug in parser',
      refs: ['HEAD', 'master'],
    },
    {
      hash: 'a1b2c3d',
      parents: [],
      author: {
        name: 'Bob',
        email: '[email protected]',
        timestamp: 1672444800,
      },
      message: 'Initial commit',
      refs: ['tag: v1.0.0'],
    },
  ];

  const handleLoadMore = async () => {
    // Fetch more commits...
    console.log('Loading more...');
  };

  return (
    <div style={{ height: '600px', border: '1px solid #ccc' }}>
      <GitCommitTree
        commits={commits}
        height="100%" // Container height for virtualization
        rowHeight={60} // Optional: custom row height
        onLoadMore={handleLoadMore}
        hasMore={false}
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | commits | Commit[] | Required | Array of commit objects to render. | | width | number \| string | '100%' | Width of the container. | | height | number \| string | 500 | Height of the container (crucial for virtual scrolling). | | rowHeight | number | 60 | Height of each commit row in pixels. | | graphWidth | number | undefined | Manually set width of the graph area. If not provided, it's calculated automatically. | | onLoadMore | () => Promise<void> \| void | undefined | Callback function triggered when scrolling near the bottom. | | hasMore | boolean | false | Whether there are more commits to load. | | loading | boolean | false | Loading state indicator. | | threshold | number | 200 | Distance in pixels from bottom to trigger onLoadMore. |

Types

Commit

interface Commit {
  hash: string;
  parents: string[];
  author: {
    name: string;
    email: string;
    timestamp: number; // Unix timestamp in seconds or milliseconds
  };
  message: string;
  refs?: string[]; // e.g., ['HEAD', 'master', 'tag: v1.0.0']
}

License

MIT