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).