Have ideas to improve npm?Join in the discussion! ¬Ľ

    cdaringe-react-image-diff

    0.2.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    react-image-diff

    Compares images, inspired by Github's image diff view modes.

    Installation

    npm install react-image-diff
    

    Demo

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

    Usage

    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

    Install

    npm i cdaringe-react-image-diff

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • avatar