bs-react-diff-viewer

bs-react-diff-viewer

ReasonML bindings for react-diff-viewer library.

Installation

npm i --save bs-react-diff-viewer react-diff-viewer

Then add bs-react-diff-viewer as a dependency to bsconfig.json.

Usage

[@react.component]
let make = (~before, ~after) => {
  let renderContent = content =>
    <SyntaxHighlighter language=`JavaScript>
      content
    </SyntaxHighlighter>;
  <ReactDiffViewer
    oldValue=before
    newValue=after
    compareMethod=`words
    splitView=false
    renderContent
    styles={ReactDiffViewer.Styles.make(
      ~wordDiff=Styles.wordDiff,
      ~content=Styles.content,
      ~contentText=Styles.contentText,
      ~lineNumber=Styles.lineNumber,
      ~gutter=Styles.gutter,
      ~diffContainer=Styles.diffContainer,
      (),
    )}
  />;;
};

JSX 2

The package provides fallback for projects using older version of JSX syntax.

let component = ReasonReact.statelessComponent("Demo");

let make = (~before, ~after, _children) => {
  ...component,
  render: (_self) => {
    let renderContent = content =>
      <SyntaxHighlighter language=`JavaScript>
        {...content}
      </SyntaxHighlighter>;
    <ReactDiffViewer.Jsx2
      oldValue=before
      newValue=after
      compareMethod=`words
      splitView=false
      renderContent
      styles={ReactDiffViewer.Styles.make(
        ~wordDiff=Styles.wordDiff,
        ~content=Styles.content,
        ~contentText=Styles.contentText,
        ~lineNumber=Styles.lineNumber,
        ~gutter=Styles.gutter,
        ~diffContainer=Styles.diffContainer,
        (),
      )}
    />;
  }
};