# react-visual-diff

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

Latest version **0.4.3** (published 2019-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-visual-diff
pnpm add react-visual-diff
yarn add react-visual-diff
bun add react-visual-diff
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.3 |
| Published | 2019-02-07 |
| First published | 2018-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 112.7 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | juliankrispel |
| Maintainers | juliankrispel |

## Links

- npm: https://www.npmjs.com/package/react-visual-diff
- Repository: https://github.com/Tettra/react-visual-diff
- Homepage: https://github.com/Tettra/react-visual-diff#readme
- Issues: https://github.com/Tettra/react-visual-diff/issues
- npm.io page: https://npm.io/package/react-visual-diff

## Dependencies (4)

- [diff](https://npm.io/package/diff.md) ^3.5.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.10
- [flatted](https://npm.io/package/flatted.md) ^1.0.2
- [react-is](https://npm.io/package/react-is.md) ^16.6.3

## Recent versions

- 0.4.3 (latest) — 2019-02-07
- 0.4.2 — 2018-11-16
- 0.4.1 — 2018-11-15
- 0.4.0 — 2018-11-15
- 0.3.8 — 2018-10-31
- 0.3.7 — 2018-10-12
- 0.3.6 — 2018-10-12
- 0.3.5 — 2018-10-05
- 0.3.4 — 2018-09-21
- 0.3.3 — 2018-09-19
- 0.3.2 — 2018-09-19
- 0.3.1 — 2018-09-19
- 0.3.0 — 2018-09-14
- 0.2.3 — 2018-09-14
- 0.2.2 — 2018-09-06
- … 7 more at https://npm.io/package/react-visual-diff/versions

## README

# react-visual-diff

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

[![NPM](https://img.shields.io/npm/v/react-visual-diff.svg)](https://www.npmjs.com/package/react-visual-diff) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

This module provides a way of visually rendering differences between React Elements. It was originally developed for [tettra](http://tettra.co/) to visualize differences between two documents. It uses the [`deep-diff` module](https://www.npmjs.com/package/deep-diff) 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'

...

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


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

```jsx
<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](https://github.com/tettra)

---
_Source: https://npm.io/package/react-visual-diff · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._