react-visual-diff

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

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.

Limitations:

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

Install

npm install --save react-visual-diff

Basic Usage

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>}
/>

Rendering changes

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>}
  />

Diffing only certain props

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.

<VisualDiff> Props:

Roadmap

• 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

License

MIT © Tettra