My Diff Viewer

A customizable React component to visually compare two sets of data and display differences in a side-by-side format.

Features

• Side-by-Side Comparison: Display differences between two data sets in an organized, readable format.
• Syntax Highlighting: Easily spot changes with clear visual markers.
• Customizable Styling: Adjust the appearance to fit your project's design.

Installation

Install the package via NPM:

npm install my-diff-viewer

Usage

import React from 'react';
import DiffViewer from 'my-diff-viewer';

const App = () => {
  const oldText = "Hello, this is the original text.";
  const newText = "Hello, this is the modified text!";

  return (
    <div>
      <h1>Diff Viewer Example</h1>
      <DiffViewer oldValue={oldText} newValue={newText} />
    </div>
  );
};

export default App;

Props

• oldValue (string): Original text or data.
• newValue (string): Modified text or data.

Example

Example output for comparing text differences:

<DiffViewer 
  oldValue="Original text" 
  newValue="Updated text" 
/>

Contributing

Feel free to open issues or submit pull requests to improve the project. All contributions are welcome!

License

MIT License. See LICENSE for more information.

Links

• GitHub Repository
• NPM Package

Explanation:

• Installation and Usage: Describes how to install and use the package.
• Props: Lists component props with descriptions.
• Contributing and License: Encourages contributions and references the license.
• Links: Directs users to GitHub and NPM for more details.