├── .gitignore ├── package.json ├── README.md ├── src └── DeferImage.js ├── LICENSE └── dist └── DeferImage.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-defer-image", 3 | "version": "0.0.7", 4 | "description": "React component for deferred tag", 5 | "main": "dist/DeferImage.js", 6 | "files": [ 7 | "dist/DeferImage.js" 8 | ], 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "Are Wojciechowski ", 13 | "license": "ISC", 14 | "dependencies": { 15 | "react": "^0.13.3" 16 | }, 17 | "keywords": [ 18 | "image", 19 | "defer", 20 | "deferred", 21 | "lazy load", 22 | "lazy-load", 23 | "react", 24 | "component" 25 | ], 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/are-are-/react-defer-image" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## `react-defer-image` 2 | 3 | Really simple image component that renders itself deferred. 4 | 5 | ## Install 6 | 7 | ``` 8 | npm install --save react-defer-image 9 | ``` 10 | 11 | ## Usage 12 | 13 | ``` 14 | import React from "react"; 15 | import DeferImage from "react-defer-image"; 16 | 17 | return ( 18 | 21 | ); 22 | 23 | ``` 24 | 25 | ## Props 26 | 27 | ### `src="String" [required]` 28 | 29 | Url to image. 30 | 31 | ### `emptySrc="String" [optional]` 32 | 33 | Url to image used to render when loading. 34 | 35 | 36 | ## Attributions 37 | 38 | Thanks to [loktar00](https://github.com/loktar00) / [react-lazy-load](https://github.com/loktar00/react-lazy-load) for inspiration. 39 | -------------------------------------------------------------------------------- /src/DeferImage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class DeferImage extends React.Component { 4 | 5 | static propTypes = { 6 | src: React.PropTypes.string.isRequired, 7 | emptySrc: React.PropTypes.string 8 | } 9 | 10 | constructor(props) { 11 | super(props); 12 | } 13 | 14 | componentDidUpdate(prevProps) { 15 | let element = this.refs.image.getDOMNode(); 16 | element.setAttribute("src", element.getAttribute("data-src")); 17 | 18 | element.setAttribute("src", this.props.src); 19 | } 20 | 21 | render() { 22 | return ( 23 | 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /dist/DeferImage.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 8 | 9 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 12 | 13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 14 | 15 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 16 | 17 | var _react = require("react"); 18 | 19 | var _react2 = _interopRequireDefault(_react); 20 | 21 | var DeferImage = (function (_React$Component) { 22 | _inherits(DeferImage, _React$Component); 23 | 24 | _createClass(DeferImage, null, [{ 25 | key: "propTypes", 26 | value: { 27 | src: _react2["default"].PropTypes.string.isRequired, 28 | emptySrc: _react2["default"].PropTypes.string 29 | }, 30 | enumerable: true 31 | }]); 32 | 33 | function DeferImage(props) { 34 | _classCallCheck(this, DeferImage); 35 | 36 | _get(Object.getPrototypeOf(DeferImage.prototype), "constructor", this).call(this, props); 37 | } 38 | 39 | _createClass(DeferImage, [{ 40 | key: "componentDidUpdate", 41 | value: function componentDidUpdate(prevProps) { 42 | var element = this.refs.image.getDOMNode(); 43 | element.setAttribute("src", element.getAttribute("data-src")); 44 | 45 | element.setAttribute("src", this.props.src); 46 | } 47 | }, { 48 | key: "render", 49 | value: function render() { 50 | return _react2["default"].createElement("img", { 51 | ref: "image", 52 | "data-src": this.props.emptySrc || "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", 53 | style: { maxWidth: "100%", margin: "0 auto", display: "block" } }); 54 | } 55 | }]); 56 | 57 | return DeferImage; 58 | })(_react2["default"].Component); 59 | 60 | exports["default"] = DeferImage; 61 | module.exports = exports["default"]; --------------------------------------------------------------------------------