react-version-compare

React Compare

A React component for comparing strings and arrays with precise word-level and item-level highlighting of differences.

Features

• 🎯 Precise Highlighting: Only highlights the actual differences, not entire lines
• 📝 String Comparison: Word-level diff for text content
• 📋 Array Comparison: Item-level diff for arrays of strings
• 🎨 Clean Visual Design: Clear red/green highlighting for changes
• 📱 Responsive: Works on desktop and mobile devices
• ⚡ TypeScript Support: Full TypeScript definitions included
• 🎛️ Multiple Views: Side-by-side or inline comparison modes

Installation

npm install react-version-compare

yarn add react-version-compare

Basic Usage

String Comparison

import React from 'react';
import Compare from 'react-version-compare';
import 'react-version-compare/dist/styles.css';

const App = () => {
  const original = 'I am Captain Kirk, Captain of the USS Enterprise.';
  const modified = 'I am Captain Picard, Captain of the USS Enterprise.';

  return (
    <Compare 
      original={original}
      modified={modified}
    />
  );
};

Result: Only "Kirk" (in red) and "Picard" (in green) will be highlighted.

Array Comparison

const originalArray = [
  'First item',
  'Second item', 
  'Third item'
];

const modifiedArray = [
  'First item',
  'Modified second item',
  'Third item'
];

<Compare 
  original={originalArray}
  modified={modifiedArray}
/>

API Reference

Props

Prop	Type	Default	Description
original	string | string[]	required	The original content
modified	string | string[]	required	The modified content
viewMode	'side-by-side' | 'inline'	'side-by-side'	How to display the comparison
className	string	''	Custom CSS class name

Examples

Precise Word-Level Highlighting

// Example 1: Minimal changes
const original = 'I am Captain Kirk, Captain of the USS Enterprise.';
const modified = 'I am Captain Picard, Captain of the USS Enterprise.';
// Only "Kirk" → "Picard" highlighted

// Example 2: Multiple changes  
const original = 'I am Captain Kirk, Captain of the USS Enterprise.';
const modified = 'I am Commander Benjamin Sisko, Commander of Deep Space 9.';
// Highlights: "Captain Kirk, Captain of the USS Enterprise" → "Commander Benjamin Sisko, Commander of Deep Space 9"

Array Comparison

const original = ['Item A', 'Item B', 'Item C'];
const modified = ['Item A', 'Modified Item B', 'Item C', 'Item D'];

<Compare original={original} modified={modified} />

Inline View

<Compare 
  original="Original text"
  modified="Modified text"
  viewMode="inline"
/>

Styling

The component uses CSS classes that you can customize:

.diff-removed {
  /* Styling for removed content (red) */
}

.diff-added {
  /* Styling for added content (green) */
}

.diff-unchanged {
  /* Styling for unchanged content */
}

Use Cases

• Document revisions: Compare different versions of text
• Code reviews: Highlight changes in code snippets
• Content management: Show edits in articles or posts
• Data comparison: Compare lists or arrays of items
• Translation work: Compare original and translated text

How It Works

• String comparison: Uses word-level diffing to identify precise changes
• Array comparison: Compares items by position and content
• Smart highlighting: Only highlights actual differences, not entire lines
• Type safety: Ensures both inputs are the same type (both strings or both arrays)

License

Apache License 2.0 - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please open an issue on GitHub.

Changelog

See CHANGELOG.md for release history.

Versioning

To bump the version, use npm version:

npm version patch   # or 'minor' or 'major'

This will update package.json, create a git tag, and (optionally) commit the change.