A React Component that renders the structural differences of two React Elements

NPM JavaScript Style Guide

This module provides a way of visually rendering differences between React Elements. It was originally developed for tettra to visualize differences between two documents. It uses the deep-diff module under the hood.

• All function props, such as onClick handlers are discarded when rendering a diff (However, you can make the diff interactive via the renderChange prop)
• We're diffing the structure of two React Elements. react-visual-diff is not a visual regression tool.

npm install --save react-visual-diff

The most simple form of using the VisualDiff component is to just define two props - left and right:

import VisualDiff from 'react-visual-diff'
...
<VisualDiff
 left={<span>This is the left side</span>}
 right={<span>This is the left side</span>}
/>

The default style for rendering changes is ok for basic needs, but usually you'll want to control this.

The renderChange prop lets you do this:

<VisualDiff
 left={<span>This is the left side</span>}
 right={<span>This is the right side</span>}
 renderChange={({ type, children }) => 
 type === 'added'
 ? <Added>{children}</Added>
 : <Removed>{children}</Removed>}
 />

Basically, when two react elements are compared, they're first being serialized to objects and then diffed. By default the following props are diffed:

const diffProps = ['children', 'type', 'className', 'style']

If you'd like to restrict this to a different set, simply set the diffProps prop

For example:

<VisualDiff
 left={<span>This is the left side</span>}
 right={<span>This is the left side</span>}
 diffProps={['children']}
 />

This would only render differences of the children prop.

• An example with draft js documents
• Examples with various open source components
• An example with interaction
• Reduce file size (currently it's pretty big)
• react-native support

MIT © Tettra