render-diff-react

Render Diff React

A beautiful and customizable React component for rendering Git diffs with syntax highlighting

Display Git diffs with beautiful syntax highlighting, extensive customization options, and zero external dependencies for diff functionality

Features • Installation • Usage • API Reference • Examples • Technical Details • License

Features

• 🎨 Beautiful UI: GitHub-style diff rendering with clean, modern design
• 🔧 Highly Customizable: Extensive theming and styling options
• 📝 Syntax Highlighting: Built-in syntax highlighting for code changes
• 📱 Responsive: Works great on desktop and mobile devices
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions
• ⚡ Ultra Lightweight: Zero external dependencies for diff functionality and icons, optimized performance
• 🎨 Theme Support: Customizable colors and styling
• 🔧 Flexible: Show/hide various elements and customize behavior

Installation

npm install render-diff-react
# or
yarn add render-diff-react
# or
pnpm add render-diff-react

CSS Styles

The package includes CSS styles for syntax highlighting. You have several options to include them:

Option 1: Import CSS file

/* Import the styles in your CSS file */
@import "render-diff-react/src/styles.css";

Option 2: Import in JavaScript/TypeScript

// Import in your JavaScript/TypeScript file
import "render-diff-react/src/styles.css";

Option 3: Programmatic injection

import { injectSyntaxHighlightingStyles } from "render-diff-react";

// Call this function once in your app
injectSyntaxHighlightingStyles();

Option 4: Manual CSS injection

import { syntaxHighlightingCSS } from "render-diff-react";

// Inject the CSS manually
const style = document.createElement("style");
style.textContent = syntaxHighlightingCSS;
document.head.appendChild(style);

Quick Start

import { DiffViewer } from "render-diff-react";

function App() {
  const gitDiff = `
diff --git a/src/App.tsx b/src/App.tsx
index 1234567..abcdefg 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
 import React from 'react';
+import { useState } from 'react';
 
 function App() {
-  return <div>Hello World</div>;
+  const [count, setCount] = useState(0);
+  return <div>Hello World {count}</div>;
 }
`;

  return (
    <div>
      <h1>My Git Diff</h1>
      <DiffViewer patch={gitDiff} />
    </div>
  );
}

Props

Required Props

Prop	Type	Description
patch	string	The Git diff patch string to render

Optional Props

Display Options

Prop	Type	Default	Description
showLineNumbers	boolean	true	Whether to show line numbers
showFileHeader	boolean	true	Whether to show the file header
showHunkHeaders	boolean	true	Whether to show the hunk headers
enableSyntaxHighlighting	boolean	true	Whether to enable syntax highlighting
syntaxHighlightLanguage	string	"typescript"	The language to use for syntax highlighting

Styling Props

Prop	Type	Description
className	string	Custom CSS classes for the main container
fileClassName	string	Custom CSS classes for the file container
fileHeaderClassName	string	Custom CSS classes for the file header
fileNameClassName	string	Custom CSS classes for the file name
additionsClassName	string	Custom CSS classes for the additions count
deletionsClassName	string	Custom CSS classes for the deletions count
splitViewClassName	string	Custom CSS classes for the split view container
codeLineClassName	string	Custom CSS classes for the code lines
lineNumberClassName	string	Custom CSS classes for the line numbers
hunkHeaderClassName	string	Custom CSS classes for the hunk header
hunkContentClassName	string	Custom CSS classes for the hunk content
addedLineClassName	string	Custom CSS classes for added lines
deletedLineClassName	string	Custom CSS classes for deleted lines
contextLineClassName	string	Custom CSS classes for context lines
prefixClassName	string	Custom CSS classes for the prefix (+/-/space)
codeContentClassName	string	Custom CSS classes for the code content
highlightAddedClassName	string	Custom CSS classes for highlighted additions
highlightDeletedClassName	string	Custom CSS classes for highlighted deletions
tokenClassName	string	Custom CSS classes for syntax highlighted tokens
tokenTextClassName	string	Custom CSS classes for text tokens

Theme Props

Prop	Type	Description
theme.backgroundColor	string	Background color for the main container
theme.borderColor	string	Border color for file containers
theme.fileHeaderBackgroundColor	string	Background color for file headers
theme.fileNameColor	string	Text color for file names
theme.additionsColor	string	Text color for additions count
theme.deletionsColor	string	Text color for deletions count
theme.splitViewBackgroundColor	string	Background color for the split view
theme.lineNumberColor	string	Text color for line numbers
theme.codeColor	string	Text color for code content
theme.addedLineBackgroundColor	string	Background color for added lines
theme.deletedLineBackgroundColor	string	Background color for deleted lines
theme.hunkHeaderBackgroundColor	string	Background color for hunk headers
theme.hunkHeaderColor	string	Text color for hunk headers
theme.highlightAddedBackgroundColor	string	Background color for highlighted additions
theme.highlightDeletedBackgroundColor	string	Background color for highlighted deletions

Styling

The component comes with built-in styles that work out of the box. For syntax highlighting to work properly, you need to import the CSS styles:

/* Import the syntax highlighting styles */
@import "render-diff-react/src/styles.css";

The component uses a dark theme by default, similar to GitHub's diff view. You can customize all colors and styles using the theme prop and various className props.

Live Demo

🚀 Try the interactive demo

The demo showcases all features with live examples and comprehensive documentation.

Examples

Basic Usage

import { DiffViewer } from "render-diff-react";

function BasicExample() {
  const diff = `diff --git a/file.js b/file.js
index 1234567..abcdefg 100644
--- a/file.js
+++ b/file.js
@@ -1,3 +1,4 @@
 function hello() {
-  console.log("Hello");
+  console.log("Hello World");
+  return true;
 }
`;

  return <DiffViewer patch={diff} />;
}

Custom Styling

import { DiffViewer } from "render-diff-react";

function CustomStylingExample() {
  return (
    <DiffViewer
      patch={diff}
      className="my-custom-diff"
      fileClassName="border-2 border-blue-500"
      theme={{
        backgroundColor: "#1a1a1a",
        borderColor: "#404040",
        fileNameColor: "#ffffff",
        additionsColor: "#4ade80",
        deletionsColor: "#f87171",
      }}
    />
  );
}

Disable Features

import { DiffViewer } from "render-diff-react";

function MinimalExample() {
  return (
    <DiffViewer
      patch={diff}
      showLineNumbers={false}
      showFileHeader={false}
      showHunkHeaders={false}
      enableSyntaxHighlighting={false}
    />
  );
}

Custom Syntax Highlighting

import { DiffViewer } from "render-diff-react";

function PythonExample() {
  return <DiffViewer patch={pythonDiff} syntaxHighlightLanguage="python" />;
}

Supported Languages

The component supports syntax highlighting for all languages supported by refractor, including:

• JavaScript/TypeScript
• Python
• Java
• C/C++
• Go
• Rust
• PHP
• Ruby
• And many more...

Browser Support

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

Demo Development

The interactive demo is located in examples/vite-demo/:

cd examples/vite-demo
npm install
npm run dev

Visit http://localhost:3000 to see the demo in action.

Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

MIT © Aashish Singhal

Technical Details

Custom Diff Implementation

This package includes a custom word-level diff implementation that eliminates the need for external diff libraries. The implementation:

• Splits text by words and spaces for accurate diffing
• Provides the same API as the original diff package
• Reduces bundle size by ~50KB
• Eliminates external dependencies for diff functionality

Dependencies

• refractor: For syntax highlighting
• react: Peer dependency
• react-dom: Peer dependency

Custom Icons

The package includes custom SVG icons instead of external icon libraries:

• FileTextIcon: For file headers
• ChevronsUpDownIcon: For hunk headers

Acknowledgments

• Built with React
• Syntax highlighting powered by refractor
• Custom SVG icons for minimal dependencies
• Custom diff implementation for optimal performance