react-visual-diff

A react component that can render a diff of two react components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-visual-diff
0.4.35 years ago6 years agoMinified + gzip package size for react-visual-diff in KB

Readme

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 | A react component (can be just a function) that takes two props, type is the type of change ("added" or "removed"), children is just the content of the change | | 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