Skip to content
React component for rendering the diff of two React elements
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintrc
.eslintrc-default
.flowconfig
.gitignore
LICENSE
README.md
package.json
rollup.config.js
yarn.lock

README.md

react-visual-diff

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.

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:

Property Type required? Description
left React.Element required Pass React.Element or just jsx left={<MyFancyComponent>}
right React.Element required Pass React.Element or just jsx right={<MyOtherFancyComponent>}
renderChange `Component<{ type: 'added' 'removed', children: React$Children }>` optional
diffProps Array<string> optional An array of prop names that will be diffed. defaults to ['children', 'type', 'className', 'style']

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

You can’t perform that action at this time.