Add lib and compiled dist

Author: fakenickels

dist/browser.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+if ((typeof window === 'undefined' ? 'undefined' : (0, _typeof3.default)(window)) !== undefined) {
+  window.ReactImg = require('./index');
+}

dist/browser.min.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _styles = require('./styles.css');
+
+var _styles2 = _interopRequireDefault(_styles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Img = _react2.default.createClass({
+  displayName: 'Img',
+
+  propTypes: {
+    src: _react.PropTypes.string.isRequired,
+    imgClasses: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.array]),
+    holderClasses: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.array])
+  },
+
+  componentDidMount: function componentDidMount() {
+    var holder = _reactDom2.default.findDOMNode(this);
+
+    holder.querySelector('.' + _styles2.default['intended']).addEventListener('load', function () {
+      holder.querySelector('.' + _styles2.default['placeholder']).classList.add(_styles2.default['deactivated']);
+    });
+  },
+  render: function render() {
+    return _react2.default.createElement(
+      'div',
+      {
+        className: (0, _classnames2.default)(_styles2.default['image-holder'], this.props.holderClasses)
+      },
+      _react2.default.createElement('img', {
+        className: (0, _classnames2.default)(_styles2.default['intended'], this.props.imgClasses),
+        src: this.props.src
+      }),
+      _react2.default.createElement('img', {
+        className: (0, _classnames2.default)(_styles2.default['placeholder'], this.props.imgClasses),
+        src: '/images/placeholder.png'
+      })
+    );
+  }
+});
+
+exports.default = Img;

dist/browser_exposer.js

@@ -0,0 +1,24 @@
+._styles__image-holder {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+}
+._styles__intended,
+._styles__placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+._styles__intended {
+  z-index: 0;
+}
+._styles__placeholder {
+  z-index: 1;
+  opacity: 1;
+  transition: opacity 0.6s ease-in;
+}
+._styles__placeholder._styles__deactivated {
+  opacity: 0;
+}

dist/index.js

@@ -0,0 +1,3 @@
+if(typeof window !== undefined){
+  window.ReactImg = require('./index');
+}

dist/styles.css

@@ -0,0 +1,42 @@
+import React, {PropTypes} from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+
+import styles from './styles.css';
+
+const Img = React.createClass({
+  propTypes: {
+    src: PropTypes.string.isRequired,
+    imgClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    holderClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  },
+
+  componentDidMount(){
+    const holder = ReactDOM.findDOMNode(this);
+
+    holder.querySelector(`.${styles['intended']}`)
+    .addEventListener('load', () => {
+      holder.querySelector(`.${styles['placeholder']}`)
+        .classList.add(styles['deactivated']);
+    });
+  },
+
+  render(){
+    return (
+      <div
+        className={classNames(styles['image-holder'], this.props.holderClasses)}
+      >
+        <img
+            className={classNames(styles['intended'], this.props.imgClasses)}
+            src={this.props.src}
+        />
+        <img
+            className={classNames(styles['placeholder'], this.props.imgClasses)}
+            src="/images/placeholder.png"
+        />
+      </div>
+    );
+  }
+});
+
+export default Img;

lib/browser_exposer.js

@@ -0,0 +1,22 @@
+.image-holder
+  position relative
+  width 100%
+  height 0
+  padding-bottom 100%
+
+.intended, .placeholder
+  position absolute
+  top 0
+  left 0
+  width 100%
+
+.intended
+  z-index 0
+
+.placeholder
+  z-index 1
+  opacity 1
+  transition opacity .6s ease-in
+
+.placeholder.deactivated
+  opacity 0