index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>React Diff Image</title>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      font-weight: 200;
      margin: 0 auto;
      width: 750px;
    }
    textarea {
      font-family: monospace;
      font-size: inherit;
      height: 150px;
      width: 100%;
    }
    pre {
      white-space: pre-wrap;
    }
    label {
      display: block;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script src="//fb.me/react-with-addons-0.14.7.js"></script>
  <script src="//fb.me/react-dom-0.14.7.js"></script>
  <script src="//npmcdn.com/babel-transform-in-browser@6.4.6/dist/btib.min.js"></script>
  <script src="dist/react-image-diff.js"></script>
  <script type="text/es2015">
    var imageSets = {
      aralSea: {
        before: './public/img/aralSea-1970.jpg',
        after: './public/img/aralSea-2014.jpg',
        height: 281,
        width: 500
      },
      background: {
        before: './public/img/background-0.png',
        after: './public/img/background-1.png'
      },
      monocle: {
        before: './public/img/monocle-0.jpg',
        after: './public/img/monocle-1.jpg'
      },
      'spotTheDifference': {
        before: './public/img/spot-the-difference-a.jpg',
        after: './public/img/spot-the-difference-b.jpg'
      },
      'spotTheDifference2': {
        before: './public/img/spot-the-difference-2a.jpg',
        after: './public/img/spot-the-difference-2b.jpg'
      },
      yellowstone: {
        before: './public/img/yellowstone-1988.jpg',
        after: './public/img/yellowstone-1990.jpg',
        height: 500,
        width: 500
      }
    };

    var App = React.createClass({
      getInitialState: function() {
        return {
          images: 'monocle',
          type: 'fade',
          value: .5
        };
      },

      handleImageSelect: function(e) {
        this.setState({images: e.target.value});
      },

      handleInputChange: function(e) {
        this.setState({
          value: parseFloat(e.target.value)
        });
      },

      handleRadioChange: function(e) {
        this.setState({type: e.target.value});
      },

      render: function () {
        var images = imageSets[this.state.images];

        return (
          <div>
            <h1>react-image-diff</h1>
            <select onChange={this.handleImageSelect}>
              <option value='monocle'>Monocle</option>
              <option value='background'>Background</option>
              <option value='aralSea'>Aral Sea 1970-2014</option>
              <option value='spotTheDifference'>Spot the Difference 1</option>
              <option value='spotTheDifference2'>Spot the Difference 2</option>
              <option value='yellowstone'>Yellowstone Fire 1988</option>
            </select>
            <div>
              <ImageDiff
                {...images}
                type={this.state.type}
                value={this.state.value}
              />
            </div>
            <input
              type='range'
              defaultValue={this.state.value}
              min={0}
              max={1}
              step={.01}
              onChange={this.handleInputChange}
              disabled={this.state.type === 'difference' ? true : false}
            />
            <br/>
            <label>
              <input name='type' type='radio' value='swipe' onChange={this.handleRadioChange} />
              swipe
            </label>
            <label>
              <input name='type' type='radio' value='fade' onChange={this.handleRadioChange} defaultChecked />
              fade
            </label>
            <label>
              <input name='type' type='radio' value='difference' onChange={this.handleRadioChange} />
              difference
            </label>
          </div>
        );
      }
    });

    ReactDOM.render(<App/>, document.getElementById('root'));
  </script>
</body>
</html>