# cdaringe-react-image-diff

> Highlight differences between images

Latest version **0.2.0** (published 2017-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install cdaringe-react-image-diff
pnpm add cdaringe-react-image-diff
yarn add cdaringe-react-image-diff
bun add cdaringe-react-image-diff
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2017-12-07 |
| First published | 2017-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | cdaringe |
| Maintainers | cdaringe |
| Keywords | diff, image, react |

## Links

- npm: https://www.npmjs.com/package/cdaringe-react-image-diff
- Repository: https://github.com/cdaringe/react-image-diff
- Homepage: https://github.com/cezary/react-image-diff
- Issues: https://github.com/cezary/react-image-diff/issues
- npm.io page: https://npm.io/package/cdaringe-react-image-diff

## Recent versions

- 0.2.0 (latest) — 2017-12-07

## README

# react-image-diff

Compares images, inspired by Github's [image diff view modes](https://github.com/blog/817-behold-image-view-modes).

![](public/img/demo-fade.gif)
![](public/img/demo-swipe.gif)

## Installation

```
npm install react-image-diff
```

## Demo

http://cezary.github.io/react-image-diff/

## Usage

```javascript
import React from 'react';
import ImageDiff from 'react-image-diff';

class Component extends React.Component {
  render() {
    return (
      <ImageDiff before={this.props.original} after={this.props.altered} type="fade" value={.5} />
    );
  }
}
```

### Props

* after: string - url to after image
* before: string - url to before image
* height: number - height in pixels
* width: number - width in pixels
* type: string - type of image comparison (difference, fade, or swipe)
* value: number - decimal fraction used to compute transition between before and after images

## License

MIT

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