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

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

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
.github/workflows		.github/workflows
examples/vite-demo		examples/vite-demo
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json

License

AashishSinghal/render-diff-react

Folders and files

Latest commit

History

Repository files navigation

Render Diff React

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

Features

Installation

CSS Styles

Option 1: Import CSS file

Option 2: Import in JavaScript/TypeScript

Option 3: Programmatic injection

Option 4: Manual CSS injection

Quick Start

Props

Required Props

Optional Props

Display Options

Styling Props

Theme Props

Styling

Live Demo

Examples

Basic Usage

Custom Styling

Disable Features

Custom Syntax Highlighting

Supported Languages

Browser Support

Development

Demo Development

Contributing

License

Technical Details

Custom Diff Implementation

Dependencies

Custom Icons

Acknowledgments

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages