React Diff Viewer
May 23, 2020
Kyle Matthews, author of the Gatsbyjs project, tweeted asking whether anyone had made a React component making use of the
Example provided int the VSCode docs
My use case never didn't require the "line-by-line" style comparison for git, but was more focused on an expectation of finding small differences between different people's inputs. I went with an approach that could be customized to either show a diff by letters or by words.
Here's the example I built!
Use with Prism JS
It's also possible to use this for an inline text diff for code samples using Prism js!
var str = "text before diff";const fooprofessionalVariable = "bar";
This gets a bit tricky, because Prism JS isn't aware of the React lifecycle, and replaces every element inside the target
Also, you will need to modify the React Diff component to run on any text that is included in the string that you want highlighting on. That will end up looking like this:
Hope this helps as you make your own content!
There is also an official Prism js plugin that supports highlighting for line diffs, but I don't think it handles the string comparison for you.