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, (), )} />; }};