# jsondiffpatch-for-react

> jsondiffpatch for react

Latest version **1.0.4** (published 2020-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsondiffpatch-for-react
pnpm add jsondiffpatch-for-react
yarn add jsondiffpatch-for-react
bun add jsondiffpatch-for-react
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-01-17 |
| First published | 2016-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 11 |
| Author | guoguangyu |
| Maintainers | escape |
| Keywords | react, json, diff |

## Links

- npm: https://www.npmjs.com/package/jsondiffpatch-for-react
- Repository: https://github.com/hero-guo/jsondiffpatch-for-react
- Homepage: https://github.com/hero-guo/jsondiffpatch-for-react#readme
- Issues: https://github.com/hero-guo/jsondiffpatch-for-react/issues
- npm.io page: https://npm.io/package/jsondiffpatch-for-react

## Dependencies (1)

- [jsondiffpatch](https://npm.io/package/jsondiffpatch.md) ^0.3.11

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-01-17
- 1.0.3 — 2018-01-19
- 1.0.2 — 2017-10-19
- 1.0.1 — 2016-12-15
- 1.0.0 — 2016-10-25

## README

# jsondiffpatch-for-react
Based on https://github.com/benjamine/jsondiffpatch



# 1. install

    npm install jsondiffpatch-for-react

# 2. usage

```jsx
import React from 'react';
import JsonDiffReact from 'jsondiffpatch-for-react';

<JsonDiffReact
    right: PropTypes.any,
    left: PropTypes.any,
    show: PropTypes.bool,
    annotated: PropTypes.bool,
    tips: PropTypes.string,
    objectHash: PropTypes.func,
/>
```

# 3. component props

* `left` (array, object, string)

* `right` (array, object, string)

* `show` (bool)

    you can show/hide unchanged values

* `annotated` (bool)

    This will render the original JSON delta in html, with annotations aside explaining the meaning of each part. This attempts to make the JSON delta format self-explained.

* `tips` (string)

  Message that will displayed in case both elements are identical.

* `objectHash` (function)

  Will be passed to *jsondiffpatch* to improve array comparison performance, as described [here](https://github.com/benjamine/jsondiffpatch/blob/master/docs/arrays.md#an-example-using-objecthash).
  Example:

  ```jsx
  <JsonDiffReact
    left={left}
    right={right}
    objectHash={(obj: any) => obj.id || obj._id || obj.name || JSON.stringify(obj)}
  />
  ```

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