mergely-react

A React.js (v18) component for Mergely (v5) that is used for differencing and merging files interactively in a browser (diff/merge), providing rich API that enables you to easily integrate Mergely into your existing web application. It is suitable for comparing text files online, for example, .txt, .html, .xml, .c, .cpp, .java, etc.

Installation

npm install mergely-react

Example

import MergelyView from 'mergely-react'
import './App.css'

function App() {
  return (
    <>
      <MergelyView
          height="100%"
          ignorews
          lhs="I like apples!"
          rhs="I like bananas!"
        />
    </>
  )
}

export default App

Configuration

All configuration options can be found on https://mergely.com/doc.

In addition to the standard Mergely options, the following can be configured:

Option	Type	Default value	Description
height	string	'400px'	The height of the editor. Supports CSS height units.
onChanged	function ()		Triggered when one of the editors change, e.g. text was altered.
onInit	function ()		Triggered once, after editor is resized and initial document changes are rendered.
onResized	function ()		Triggered after the editor is resized.
onUpdated	function ()		Triggered after the editor finishes rendering. For example, text updates, options, or scroll events may trigger renders.

License

Mergely is distributed under the GPL, LGPL and MPL open source licenses.

Commercial licenses are available (see https://mergely.com/license).