Skip to content
React component for rendering the diff of two React elements
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit f34780e Nov 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example fix path mismatch Oct 12, 2018
src Remove console log Nov 19, 2018
.babelrc wip Sep 14, 2018
.editorconfig init Aug 2, 2018
.eslintrc releasing alpha Aug 16, 2018
.eslintrc-default releasing alpha Aug 16, 2018
.flowconfig wip Aug 5, 2018
.gitignore
LICENSE - add license for tettra Aug 16, 2018
README.md fix smol typo Oct 22, 2018
package.json lol rollup, how did you do this Nov 16, 2018
rollup.config.js bump version and exclude react-is from compilation Nov 15, 2018
yarn.lock lol rollup, how did you do this Nov 16, 2018

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.