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

``bash
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:

`jsx
import VisualDiff from 'react-visual-diff'

...

left={This is the left side}
right={This is the left side}
/>
`

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:


`jsx
left={This is the left side}
right={This is the right side}
renderChange={({ type, children }) =>
type === 'added'
? {children}
: {children}}
/>
`

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:

`jsx
left={This is the left side}
right={This is the left side}
diffProps={['children']}
/>
`

This would only render differences of the children prop.

$3

| Property | Type | required? | Description |
| - | - | - | - |
| left | React.Element | required | Pass React.Element or just jsx left={} |
| right | React.Element | required | Pass React.Element or just jsx right={} |
| 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 | optional | An array of prop names that will be diffed. defaults to ['children', 'type', 'className', 'style']` |

$3

- 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