react-lazy-images - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

dist/LazyImage.d.ts

@@ -7,9 +7,14 @@ /// <reference types="react" />
  */
+export interface LazyImageRenderPropArgs {
+    src?: string;
+    srcSet?: string;
+    alt?: string;
+}
 export interface LazyImageProps extends CommonLazyImageProps {
     /** Component to display once image has loaded */
-    actual: () => React.ReactElement<{}>;
+    actual: (args: LazyImageRenderPropArgs) => React.ReactElement<{}>;
     /** Component to display while image has not been requested
      * @default: undefined
      */
-    placeholder?: () => React.ReactElement<{}>;
+    placeholder?: (args: Pick<LazyImageRenderPropArgs, 'alt'>) => React.ReactElement<{}>;
     /** Component to display while the image is loading
@@ -16,0 +21,0 @@ * @default placeholder, if defined

dist/LazyImageFull.d.ts

 /// <reference types="react" />
 import React from 'react';
-/** The component's state */
-export declare type LazyImageFullState = {
-    hasBeenInView: boolean;
-    imageState: ImageState;
-};
-/** States that the image loading can be in */
-export declare enum ImageState {
-    NotAsked = "NotAsked",
-    Loading = "Loading",
-    LoadSuccess = "LoadSuccess",
-    LoadError = "LoadError",
-}
 /**
@@ -23,2 +11,4 @@ * Valid props for LazyImage components
     srcSet?: string;
+    /** The alt text description of the image you are loading */
+    alt?: string;
     /** Whether to skip checking for viewport and always show the 'actual' component
@@ -36,11 +26,12 @@ * @see https://github.com/fpapado/react-lazy-images/#eager-loading--server-side-rendering-ssr
     /** Children should be either a function or a node */
-    children?: ((RenderPropArgs) => React.ReactNode) | React.ReactNode;
+    children?: ((args: LazyImageFullRenderPropArgs) => React.ReactNode) | React.ReactNode;
     /** Render prop boolean indicating inView state */
-    render?: (RenderPropArgs) => React.ReactNode;
+    render?: (args: LazyImageFullRenderPropArgs) => React.ReactNode;
 }
 /** Values that the render props take */
-export interface RenderPropArgs {
-    state: ImageState;
+export interface LazyImageFullRenderPropArgs {
+    imageState: ImageState;
     src?: string;
     srcSet?: string;
+    alt?: string;
 }
@@ -59,6 +50,20 @@ /** Subset of react-intersection-observer's props */
      * visible before triggering.
-     * @default `0.1`
+     * @default `0.01`
      */
     threshold?: number;
 }
+/** The component's state */
+export declare type LazyImageFullState = {
+    hasBeenInView: boolean;
+    imageState: ImageState;
+};
+/** States that the image loading can be in.
+ * Used together with LazyImageFull render props
+ * */
+export declare enum ImageState {
+    NotAsked = "NotAsked",
+    Loading = "Loading",
+    LoadSuccess = "LoadSuccess",
+    LoadError = "LoadError",
+}
 /**
@@ -70,2 +75,3 @@ * Component that preloads the image once it is in the viewport,
 export declare class LazyImageFull extends React.Component<LazyImageFullProps, LazyImageFullState> {
+    static displayName: string;
     constructor(props: any);
@@ -72,0 +78,0 @@ onInView(inView: any): void;

dist/react-lazy-images.es.js

@@ -1,2 +0,2 @@
-import e from"react";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function r(e,t){return e(t={exports:{}},t.exports),t.exports}var o,n=r(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.observe=n,t.unobserve=s,t.destroy=i;var r=new Map,o=new Map;function n(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{threshold:0},s=arguments[3],i=n.root,c=n.rootMargin,l=n.threshold||0;if(e&&t){var u=c?l.toString()+"_"+c:""+l.toString();i&&(u=s?s+"_"+u:null);var d=u?o.get(u):null;d||(d=new IntersectionObserver(a,n),u&&o.set(u,d));var h={callback:t,visible:!1,options:n,observerId:u,observer:u?void 0:d};return r.set(e,h),d.observe(e),h}}function s(e){if(e){var t=r.get(e);if(t){var n=t.observerId,s=t.observer,i=n?o.get(n):s;i&&i.unobserve(e);var a=!1;n&&r.forEach(function(t,r){t&&t.observerId===n&&r!==e&&(a=!0)}),i&&!a&&(i.disconnect(),o.delete(n)),r.delete(e)}}}function i(){o.forEach(function(e){e.disconnect()}),o.clear(),r.clear()}function a(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,n=r.get(e.target);if(n&&o>=0){var s=n.options,i=!1;Array.isArray(s.threshold)?i=s.threshold.some(function(e){return n.visible?o>e:o>=e}):void 0!==s.threshold&&(i=n.visible?o>s.threshold:o>=s.threshold),void 0!==t&&(i=i&&t),n.callback&&n.callback(i)}})}t.default={observe:n,unobserve:s,destroy:i}}),s=t(n),i={default:s,__moduleExports:n,observe:n.observe,unobserve:n.unobserve,destroy:n.destroy},a=i&&s||i,c=t(r(function(t,r){Object.defineProperty(r,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),s=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(e);function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var c=function(e){function t(){var e,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var n=arguments.length,s=Array(n),c=0;c<n;c++)s[c]=arguments[c];return r=o=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o.state={inView:!1},o.node=null,o.handleNode=function(e){o.node&&(0,a.unobserve)(o.node),o.node=e,o.observeNode(),o.props.innerRef&&o.props.innerRef(e)},o.handleChange=function(e){o.setState({inView:e}),o.props.onChange&&o.props.onChange(e)},i(o,r)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,s.Component),n(t,[{key:"componentDidUpdate",value:function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||((0,a.unobserve)(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&((0,a.unobserve)(this.node),this.node=null)}},{key:"componentWillUnmount",value:function(){this.node&&((0,a.unobserve)(this.node),this.node=null)}},{key:"observeNode",value:function(){if(this.node){var e=this.props;(0,a.observe)(this.node,this.handleChange,{threshold:e.threshold,root:e.root,rootMargin:e.rootMargin},e.rootId)}}},{key:"render",value:function(){var e=this.props,t=e.children,r=e.render,n=e.tag,i=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(e,["children","render","tag","innerRef","triggerOnce","threshold","root","rootId","rootMargin"]),a=this.state.inView;return s.createElement(n,o({},i,{ref:this.handleNode}),"function"==typeof r?r(a):null,"function"==typeof t?t(a):t)}}]),t}();c.defaultProps={tag:"div",threshold:0,triggerOnce:!1},r.default=c}));!function(e){e.NotAsked="NotAsked",e.Loading="Loading",e.LoadSuccess="LoadSuccess",e.LoadError="LoadError"}(o||(o={}));class l extends e.Component{constructor(e){super(e),this.state={hasBeenInView:!1,imageState:o.NotAsked},this.onInView=this.onInView.bind(this),this.onLoadSuccess=this.onLoadSuccess.bind(this),this.onLoadError=this.onLoadError.bind(this)}onInView(e){!0===e&&(this.props.src?(this.setState((e,t)=>Object.assign({},e,{imageState:o.Loading})),u({src:this.props.src,srcSet:this.props.srcSet}).then(this.onLoadSuccess).catch(this.onLoadError)):this.setState((e,t)=>Object.assign({},e,{imageState:o.LoadSuccess})))}onLoadSuccess(){this.setState((e,t)=>Object.assign({},e,{imageState:o.LoadSuccess}))}onLoadError(){this.setState((e,t)=>Object.assign({},e,{imageState:o.LoadError}))}render(){const{observerProps:t,src:r,srcSet:o,children:n,render:s}=this.props,{imageState:i}=this.state;return e.createElement(c,Object.assign({rootMargin:"50px 0px",threshold:.01},t,{onChange:this.onInView,triggerOnce:!0}),"function"==typeof s?s({src:r,srcSet:o,imageState:i}):"function"==typeof n?n({src:r,srcSet:o,imageState:i}):null)}}const u=({src:e,srcSet:t})=>new Promise((r,o)=>{const n=new Image;t&&(n.srcset=t),n.src=e,n.onload=r,n.onerror=o}),d=t=>{var{actual:r,placeholder:n,loading:s,error:i}=t,a=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&(r[o[n]]=e[o[n]])}return r}(t,["actual","placeholder","loading","error"]);return e.createElement(l,Object.assign({},a),({src:e,srcSet:t,imageState:a})=>{switch(a){case o.NotAsked:return!!n&&n();case o.Loading:return s?s():!!n&&n();case o.LoadSuccess:return r();case o.LoadError:return i?i():r()}})};export{d as LazyImage,o as ImageState,l as LazyImageFull};
+import e from"react";var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])};var r=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e};function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(e,t){return e(t={exports:{}},t.exports),t.exports}var a,i=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.observe=n,t.unobserve=a,t.destroy=i;var r=new Map,o=new Map;function n(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{threshold:0},a=arguments[3],i=n.root,c=n.rootMargin,u=n.threshold||0;if(e&&t){var l=c?u.toString()+"_"+c:""+u.toString();i&&(l=a?a+"_"+l:null);var p=l?o.get(l):null;p||(p=new IntersectionObserver(s,n),l&&o.set(l,p));var f={callback:t,visible:!1,options:n,observerId:l,observer:l?void 0:p};return r.set(e,f),p.observe(e),f}}function a(e){if(e){var t=r.get(e);if(t){var n=t.observerId,a=t.observer,i=n?o.get(n):a;i&&i.unobserve(e);var s=!1;n&&r.forEach(function(t,r){t&&t.observerId===n&&r!==e&&(s=!0)}),i&&!s&&(i.disconnect(),o.delete(n)),r.delete(e)}}}function i(){o.forEach(function(e){e.disconnect()}),o.clear(),r.clear()}function s(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,n=r.get(e.target);if(n&&o>=0){var a=n.options,i=!1;Array.isArray(a.threshold)?i=a.threshold.some(function(e){return n.visible?o>e:o>=e}):void 0!==a.threshold&&(i=n.visible?o>a.threshold:o>=a.threshold),void 0!==t&&(i=i&&t),n.callback&&n.callback(i)}})}t.default={observe:n,unobserve:a,destroy:i}}),s=o(i),c={default:s,__moduleExports:i,observe:i.observe,unobserve:i.unobserve,destroy:i.destroy},u=c&&s||c,l=o(n(function(t,r){Object.defineProperty(r,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),a=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(e);function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var s=function(e){function t(){var e,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var n=arguments.length,a=Array(n),s=0;s<n;s++)a[s]=arguments[s];return r=o=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(a))),o.state={inView:!1},o.node=null,o.handleNode=function(e){o.node&&(0,u.unobserve)(o.node),o.node=e,o.observeNode(),o.props.innerRef&&o.props.innerRef(e)},o.handleChange=function(e){o.setState({inView:e}),o.props.onChange&&o.props.onChange(e)},i(o,r)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,a.Component),n(t,[{key:"componentDidUpdate",value:function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||((0,u.unobserve)(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&((0,u.unobserve)(this.node),this.node=null)}},{key:"componentWillUnmount",value:function(){this.node&&((0,u.unobserve)(this.node),this.node=null)}},{key:"observeNode",value:function(){if(this.node){var e=this.props;(0,u.observe)(this.node,this.handleChange,{threshold:e.threshold,root:e.root,rootMargin:e.rootMargin},e.rootId)}}},{key:"render",value:function(){var e=this.props,t=e.children,r=e.render,n=e.tag,i=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(e,["children","render","tag","innerRef","triggerOnce","threshold","root","rootId","rootMargin"]),s=this.state.inView;return a.createElement(n,o({},i,{ref:this.handleNode}),"function"==typeof r?r(s):null,"function"==typeof t?t(s):t)}}]),t}();s.defaultProps={tag:"div",threshold:0,triggerOnce:!1},r.default=s}));!function(e){e.NotAsked="NotAsked",e.Loading="Loading",e.LoadSuccess="LoadSuccess",e.LoadError="LoadError"}(a||(a={}));var p=function(o){function n(e){var t=o.call(this,e)||this;return t.state={hasBeenInView:!1,imageState:a.NotAsked},t.onInView=t.onInView.bind(t),t.onLoadSuccess=t.onLoadSuccess.bind(t),t.onLoadError=t.onLoadError.bind(t),t}return function(e,r){function o(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(o.prototype=r.prototype,new o)}(n,o),n.prototype.onInView=function(e){!0===e&&(this.props.src?(this.setState(function(e,t){return r({},e,{imageState:a.Loading})}),f({src:this.props.src,srcSet:this.props.srcSet,alt:this.props.alt}).then(this.onLoadSuccess).catch(this.onLoadError)):this.setState(function(e,t){return r({},e,{imageState:a.LoadSuccess})}))},n.prototype.onLoadSuccess=function(){this.setState(function(e,t){return r({},e,{imageState:a.LoadSuccess})})},n.prototype.onLoadError=function(){this.setState(function(e,t){return r({},e,{imageState:a.LoadError})})},n.prototype.render=function(){var t=this.props,o=t.src,n=t.srcSet,a=t.alt,i=t.children,s=t.render,c=this.state.imageState;return e.createElement(l,r({rootMargin:"50px 0px",threshold:.01},t.observerProps,{onChange:this.onInView,triggerOnce:!0}),"function"==typeof s?s({src:o,srcSet:n,alt:a,imageState:c}):"function"==typeof i?i({src:o,srcSet:n,alt:a,imageState:c}):null)},n.displayName="LazyImageFull",n}(e.Component),f=function(e){var t=e.src,r=e.srcSet,o=e.alt;return new Promise(function(e,n){var a=new Image;r&&(a.srcset=r),o&&(a.alt=o),a.src=t,a.onload=e,a.onerror=n})},d=function(t){var o=t.actual,n=t.placeholder,i=t.loading,s=t.error,c=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&(r[o[n]]=e[o[n]])}return r}(t,["actual","placeholder","loading","error"]);return e.createElement(p,r({},c),function(e){var t=e.src,r=e.srcSet,c=e.alt;switch(e.imageState){case a.NotAsked:return!!n&&n({alt:c});case a.Loading:return i?i():!!n&&n({alt:c});case a.LoadSuccess:return o({src:t,alt:c,srcSet:r});case a.LoadError:return s?s():o({src:t,alt:c,srcSet:r})}})};d.displayName="LazyImage";export{d as LazyImage,a as ImageState,p as LazyImageFull};
 //# sourceMappingURL=react-lazy-images.es.js.map

dist/react-lazy-images.js

@@ -1,2 +0,2 @@
-var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}var n=o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.observe=n,t.unobserve=s,t.destroy=a;var r=new Map,o=new Map;function n(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{threshold:0},s=arguments[3],a=n.root,c=n.rootMargin,l=n.threshold||0;if(e&&t){var u=c?l.toString()+"_"+c:""+l.toString();a&&(u=s?s+"_"+u:null);var d=u?o.get(u):null;d||(d=new IntersectionObserver(i,n),u&&o.set(u,d));var h={callback:t,visible:!1,options:n,observerId:u,observer:u?void 0:d};return r.set(e,h),d.observe(e),h}}function s(e){if(e){var t=r.get(e);if(t){var n=t.observerId,s=t.observer,a=n?o.get(n):s;a&&a.unobserve(e);var i=!1;n&&r.forEach(function(t,r){t&&t.observerId===n&&r!==e&&(i=!0)}),a&&!i&&(a.disconnect(),o.delete(n)),r.delete(e)}}}function a(){o.forEach(function(e){e.disconnect()}),o.clear(),r.clear()}function i(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,n=r.get(e.target);if(n&&o>=0){var s=n.options,a=!1;Array.isArray(s.threshold)?a=s.threshold.some(function(e){return n.visible?o>e:o>=e}):void 0!==s.threshold&&(a=n.visible?o>s.threshold:o>=s.threshold),void 0!==t&&(a=a&&t),n.callback&&n.callback(a)}})}t.default={observe:n,unobserve:s,destroy:a}});r(n);var s,a=r(o(function(e,r){Object.defineProperty(r,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},s=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),a=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(t);function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var c=function(e){function t(){var e,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var s=arguments.length,a=Array(s),c=0;c<s;c++)a[c]=arguments[c];return r=o=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(a))),o.state={inView:!1},o.node=null,o.handleNode=function(e){o.node&&(0,n.unobserve)(o.node),o.node=e,o.observeNode(),o.props.innerRef&&o.props.innerRef(e)},o.handleChange=function(e){o.setState({inView:e}),o.props.onChange&&o.props.onChange(e)},i(o,r)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,a.Component),s(t,[{key:"componentDidUpdate",value:function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||((0,n.unobserve)(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&((0,n.unobserve)(this.node),this.node=null)}},{key:"componentWillUnmount",value:function(){this.node&&((0,n.unobserve)(this.node),this.node=null)}},{key:"observeNode",value:function(){if(this.node){var e=this.props;(0,n.observe)(this.node,this.handleChange,{threshold:e.threshold,root:e.root,rootMargin:e.rootMargin},e.rootId)}}},{key:"render",value:function(){var e=this.props,t=e.children,r=e.render,n=e.tag,s=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(e,["children","render","tag","innerRef","triggerOnce","threshold","root","rootId","rootMargin"]),i=this.state.inView;return a.createElement(n,o({},s,{ref:this.handleNode}),"function"==typeof r?r(i):null,"function"==typeof t?t(i):t)}}]),t}();c.defaultProps={tag:"div",threshold:0,triggerOnce:!1},r.default=c}));(s=exports.ImageState||(exports.ImageState={})).NotAsked="NotAsked",s.Loading="Loading",s.LoadSuccess="LoadSuccess",s.LoadError="LoadError";class i extends t.Component{constructor(e){super(e),this.state={hasBeenInView:!1,imageState:exports.ImageState.NotAsked},this.onInView=this.onInView.bind(this),this.onLoadSuccess=this.onLoadSuccess.bind(this),this.onLoadError=this.onLoadError.bind(this)}onInView(e){!0===e&&(this.props.src?(this.setState((e,t)=>Object.assign({},e,{imageState:exports.ImageState.Loading})),c({src:this.props.src,srcSet:this.props.srcSet}).then(this.onLoadSuccess).catch(this.onLoadError)):this.setState((e,t)=>Object.assign({},e,{imageState:exports.ImageState.LoadSuccess})))}onLoadSuccess(){this.setState((e,t)=>Object.assign({},e,{imageState:exports.ImageState.LoadSuccess}))}onLoadError(){this.setState((e,t)=>Object.assign({},e,{imageState:exports.ImageState.LoadError}))}render(){const{observerProps:e,src:r,srcSet:o,children:n,render:s}=this.props,{imageState:i}=this.state;return t.createElement(a,Object.assign({rootMargin:"50px 0px",threshold:.01},e,{onChange:this.onInView,triggerOnce:!0}),"function"==typeof s?s({src:r,srcSet:o,imageState:i}):"function"==typeof n?n({src:r,srcSet:o,imageState:i}):null)}}const c=({src:e,srcSet:t})=>new Promise((r,o)=>{const n=new Image;t&&(n.srcset=t),n.src=e,n.onload=r,n.onerror=o});exports.LazyImage=(e=>{var{actual:r,placeholder:o,loading:n,error:s}=e,a=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&(r[o[n]]=e[o[n]])}return r}(e,["actual","placeholder","loading","error"]);return t.createElement(i,Object.assign({},a),({src:e,srcSet:t,imageState:a})=>{switch(a){case exports.ImageState.NotAsked:return!!o&&o();case exports.ImageState.Loading:return n?n():!!o&&o();case exports.ImageState.LoadSuccess:return r();case exports.ImageState.LoadError:return s?s():r()}})}),exports.LazyImageFull=i;
+var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])};var o=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function a(e,t){return e(t={exports:{}},t.exports),t.exports}var s=a(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.observe=n,t.unobserve=a,t.destroy=s;var r=new Map,o=new Map;function n(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{threshold:0},a=arguments[3],s=n.root,c=n.rootMargin,u=n.threshold||0;if(e&&t){var l=c?u.toString()+"_"+c:""+u.toString();s&&(l=a?a+"_"+l:null);var p=l?o.get(l):null;p||(p=new IntersectionObserver(i,n),l&&o.set(l,p));var f={callback:t,visible:!1,options:n,observerId:l,observer:l?void 0:p};return r.set(e,f),p.observe(e),f}}function a(e){if(e){var t=r.get(e);if(t){var n=t.observerId,a=t.observer,s=n?o.get(n):a;s&&s.unobserve(e);var i=!1;n&&r.forEach(function(t,r){t&&t.observerId===n&&r!==e&&(i=!0)}),s&&!i&&(s.disconnect(),o.delete(n)),r.delete(e)}}}function s(){o.forEach(function(e){e.disconnect()}),o.clear(),r.clear()}function i(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,n=r.get(e.target);if(n&&o>=0){var a=n.options,s=!1;Array.isArray(a.threshold)?s=a.threshold.some(function(e){return n.visible?o>e:o>=e}):void 0!==a.threshold&&(s=n.visible?o>a.threshold:o>=a.threshold),void 0!==t&&(s=s&&t),n.callback&&n.callback(s)}})}t.default={observe:n,unobserve:a,destroy:s}});n(s);var i,c=n(a(function(e,r){Object.defineProperty(r,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),a=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(t);function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var c=function(e){function t(){var e,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var n=arguments.length,a=Array(n),c=0;c<n;c++)a[c]=arguments[c];return r=o=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(a))),o.state={inView:!1},o.node=null,o.handleNode=function(e){o.node&&(0,s.unobserve)(o.node),o.node=e,o.observeNode(),o.props.innerRef&&o.props.innerRef(e)},o.handleChange=function(e){o.setState({inView:e}),o.props.onChange&&o.props.onChange(e)},i(o,r)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,a.Component),n(t,[{key:"componentDidUpdate",value:function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||((0,s.unobserve)(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&((0,s.unobserve)(this.node),this.node=null)}},{key:"componentWillUnmount",value:function(){this.node&&((0,s.unobserve)(this.node),this.node=null)}},{key:"observeNode",value:function(){if(this.node){var e=this.props;(0,s.observe)(this.node,this.handleChange,{threshold:e.threshold,root:e.root,rootMargin:e.rootMargin},e.rootId)}}},{key:"render",value:function(){var e=this.props,t=e.children,r=e.render,n=e.tag,s=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(e,["children","render","tag","innerRef","triggerOnce","threshold","root","rootId","rootMargin"]),i=this.state.inView;return a.createElement(n,o({},s,{ref:this.handleNode}),"function"==typeof r?r(i):null,"function"==typeof t?t(i):t)}}]),t}();c.defaultProps={tag:"div",threshold:0,triggerOnce:!1},r.default=c}));(i=exports.ImageState||(exports.ImageState={})).NotAsked="NotAsked",i.Loading="Loading",i.LoadSuccess="LoadSuccess",i.LoadError="LoadError";var u=function(e){function n(t){var r=e.call(this,t)||this;return r.state={hasBeenInView:!1,imageState:exports.ImageState.NotAsked},r.onInView=r.onInView.bind(r),r.onLoadSuccess=r.onLoadSuccess.bind(r),r.onLoadError=r.onLoadError.bind(r),r}return function(e,t){function o(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}(n,e),n.prototype.onInView=function(e){!0===e&&(this.props.src?(this.setState(function(e,t){return o({},e,{imageState:exports.ImageState.Loading})}),l({src:this.props.src,srcSet:this.props.srcSet,alt:this.props.alt}).then(this.onLoadSuccess).catch(this.onLoadError)):this.setState(function(e,t){return o({},e,{imageState:exports.ImageState.LoadSuccess})}))},n.prototype.onLoadSuccess=function(){this.setState(function(e,t){return o({},e,{imageState:exports.ImageState.LoadSuccess})})},n.prototype.onLoadError=function(){this.setState(function(e,t){return o({},e,{imageState:exports.ImageState.LoadError})})},n.prototype.render=function(){var e=this.props,r=e.src,n=e.srcSet,a=e.alt,s=e.children,i=e.render,u=this.state.imageState;return t.createElement(c,o({rootMargin:"50px 0px",threshold:.01},e.observerProps,{onChange:this.onInView,triggerOnce:!0}),"function"==typeof i?i({src:r,srcSet:n,alt:a,imageState:u}):"function"==typeof s?s({src:r,srcSet:n,alt:a,imageState:u}):null)},n.displayName="LazyImageFull",n}(t.Component),l=function(e){var t=e.src,r=e.srcSet,o=e.alt;return new Promise(function(e,n){var a=new Image;r&&(a.srcset=r),o&&(a.alt=o),a.src=t,a.onload=e,a.onerror=n})},p=function(e){var r=e.actual,n=e.placeholder,a=e.loading,s=e.error,i=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&(r[o[n]]=e[o[n]])}return r}(e,["actual","placeholder","loading","error"]);return t.createElement(u,o({},i),function(e){var t=e.src,o=e.srcSet,i=e.alt;switch(e.imageState){case exports.ImageState.NotAsked:return!!n&&n({alt:i});case exports.ImageState.Loading:return a?a():!!n&&n({alt:i});case exports.ImageState.LoadSuccess:return r({src:t,alt:i,srcSet:o});case exports.ImageState.LoadError:return s?s():r({src:t,alt:i,srcSet:o})}})};p.displayName="LazyImage",exports.LazyImage=p,exports.LazyImageFull=u;
 //# sourceMappingURL=react-lazy-images.js.map

dist/react-lazy-images.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.reactLazyImages={},e.react)}(this,function(e,t){function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}t=t&&t.hasOwnProperty("default")?t.default:t;var n,s=o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.observe=n,t.unobserve=s,t.destroy=a;var r=new Map,o=new Map;function n(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{threshold:0},s=arguments[3],a=n.root,c=n.rootMargin,u=n.threshold||0;if(e&&t){var l=c?u.toString()+"_"+c:""+u.toString();a&&(l=s?s+"_"+l:null);var d=l?o.get(l):null;d||(d=new IntersectionObserver(i,n),l&&o.set(l,d));var h={callback:t,visible:!1,options:n,observerId:l,observer:l?void 0:d};return r.set(e,h),d.observe(e),h}}function s(e){if(e){var t=r.get(e);if(t){var n=t.observerId,s=t.observer,a=n?o.get(n):s;a&&a.unobserve(e);var i=!1;n&&r.forEach(function(t,r){t&&t.observerId===n&&r!==e&&(i=!0)}),a&&!i&&(a.disconnect(),o.delete(n)),r.delete(e)}}}function a(){o.forEach(function(e){e.disconnect()}),o.clear(),r.clear()}function i(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,n=r.get(e.target);if(n&&o>=0){var s=n.options,a=!1;Array.isArray(s.threshold)?a=s.threshold.some(function(e){return n.visible?o>e:o>=e}):void 0!==s.threshold&&(a=n.visible?o>s.threshold:o>=s.threshold),void 0!==t&&(a=a&&t),n.callback&&n.callback(a)}})}t.default={observe:n,unobserve:s,destroy:a}}),a=r(s),i={default:a,__moduleExports:s,observe:s.observe,unobserve:s.unobserve,destroy:s.destroy},c=i&&a||i,u=r(o(function(e,r){Object.defineProperty(r,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),s=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(t);function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var i=function(e){function t(){var e,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var n=arguments.length,s=Array(n),i=0;i<n;i++)s[i]=arguments[i];return r=o=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o.state={inView:!1},o.node=null,o.handleNode=function(e){o.node&&(0,c.unobserve)(o.node),o.node=e,o.observeNode(),o.props.innerRef&&o.props.innerRef(e)},o.handleChange=function(e){o.setState({inView:e}),o.props.onChange&&o.props.onChange(e)},a(o,r)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,s.Component),n(t,[{key:"componentDidUpdate",value:function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||((0,c.unobserve)(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&((0,c.unobserve)(this.node),this.node=null)}},{key:"componentWillUnmount",value:function(){this.node&&((0,c.unobserve)(this.node),this.node=null)}},{key:"observeNode",value:function(){if(this.node){var e=this.props;(0,c.observe)(this.node,this.handleChange,{threshold:e.threshold,root:e.root,rootMargin:e.rootMargin},e.rootId)}}},{key:"render",value:function(){var e=this.props,t=e.children,r=e.render,n=e.tag,a=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(e,["children","render","tag","innerRef","triggerOnce","threshold","root","rootId","rootMargin"]),i=this.state.inView;return s.createElement(n,o({},a,{ref:this.handleNode}),"function"==typeof r?r(i):null,"function"==typeof t?t(i):t)}}]),t}();i.defaultProps={tag:"div",threshold:0,triggerOnce:!1},r.default=i}));(n=e.ImageState||(e.ImageState={})).NotAsked="NotAsked",n.Loading="Loading",n.LoadSuccess="LoadSuccess",n.LoadError="LoadError";class l extends t.Component{constructor(t){super(t),this.state={hasBeenInView:!1,imageState:e.ImageState.NotAsked},this.onInView=this.onInView.bind(this),this.onLoadSuccess=this.onLoadSuccess.bind(this),this.onLoadError=this.onLoadError.bind(this)}onInView(t){!0===t&&(this.props.src?(this.setState((t,r)=>Object.assign({},t,{imageState:e.ImageState.Loading})),d({src:this.props.src,srcSet:this.props.srcSet}).then(this.onLoadSuccess).catch(this.onLoadError)):this.setState((t,r)=>Object.assign({},t,{imageState:e.ImageState.LoadSuccess})))}onLoadSuccess(){this.setState((t,r)=>Object.assign({},t,{imageState:e.ImageState.LoadSuccess}))}onLoadError(){this.setState((t,r)=>Object.assign({},t,{imageState:e.ImageState.LoadError}))}render(){const{observerProps:e,src:r,srcSet:o,children:n,render:s}=this.props,{imageState:a}=this.state;return t.createElement(u,Object.assign({rootMargin:"50px 0px",threshold:.01},e,{onChange:this.onInView,triggerOnce:!0}),"function"==typeof s?s({src:r,srcSet:o,imageState:a}):"function"==typeof n?n({src:r,srcSet:o,imageState:a}):null)}}const d=({src:e,srcSet:t})=>new Promise((r,o)=>{const n=new Image;t&&(n.srcset=t),n.src=e,n.onload=r,n.onerror=o});e.LazyImage=(r=>{var{actual:o,placeholder:n,loading:s,error:a}=r,i=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&(r[o[n]]=e[o[n]])}return r}(r,["actual","placeholder","loading","error"]);return t.createElement(l,Object.assign({},i),({src:t,srcSet:r,imageState:i})=>{switch(i){case e.ImageState.NotAsked:return!!n&&n();case e.ImageState.Loading:return s?s():!!n&&n();case e.ImageState.LoadSuccess:return o();case e.ImageState.LoadError:return a?a():o()}})}),e.LazyImageFull=l});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.reactLazyImages={},e.react)}(this,function(e,t){t=t&&t.hasOwnProperty("default")?t.default:t;var r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])};var o=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function a(e,t){return e(t={exports:{}},t.exports),t.exports}var i,s=a(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.observe=n,t.unobserve=a,t.destroy=i;var r=new Map,o=new Map;function n(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{threshold:0},a=arguments[3],i=n.root,c=n.rootMargin,u=n.threshold||0;if(e&&t){var l=c?u.toString()+"_"+c:""+u.toString();i&&(l=a?a+"_"+l:null);var f=l?o.get(l):null;f||(f=new IntersectionObserver(s,n),l&&o.set(l,f));var d={callback:t,visible:!1,options:n,observerId:l,observer:l?void 0:f};return r.set(e,d),f.observe(e),d}}function a(e){if(e){var t=r.get(e);if(t){var n=t.observerId,a=t.observer,i=n?o.get(n):a;i&&i.unobserve(e);var s=!1;n&&r.forEach(function(t,r){t&&t.observerId===n&&r!==e&&(s=!0)}),i&&!s&&(i.disconnect(),o.delete(n)),r.delete(e)}}}function i(){o.forEach(function(e){e.disconnect()}),o.clear(),r.clear()}function s(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,n=r.get(e.target);if(n&&o>=0){var a=n.options,i=!1;Array.isArray(a.threshold)?i=a.threshold.some(function(e){return n.visible?o>e:o>=e}):void 0!==a.threshold&&(i=n.visible?o>a.threshold:o>=a.threshold),void 0!==t&&(i=i&&t),n.callback&&n.callback(i)}})}t.default={observe:n,unobserve:a,destroy:i}}),c=n(s),u={default:c,__moduleExports:s,observe:s.observe,unobserve:s.unobserve,destroy:s.destroy},l=u&&c||u,f=n(a(function(e,r){Object.defineProperty(r,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),a=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(t);function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var s=function(e){function t(){var e,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var n=arguments.length,a=Array(n),s=0;s<n;s++)a[s]=arguments[s];return r=o=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(a))),o.state={inView:!1},o.node=null,o.handleNode=function(e){o.node&&(0,l.unobserve)(o.node),o.node=e,o.observeNode(),o.props.innerRef&&o.props.innerRef(e)},o.handleChange=function(e){o.setState({inView:e}),o.props.onChange&&o.props.onChange(e)},i(o,r)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,a.Component),n(t,[{key:"componentDidUpdate",value:function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||((0,l.unobserve)(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&((0,l.unobserve)(this.node),this.node=null)}},{key:"componentWillUnmount",value:function(){this.node&&((0,l.unobserve)(this.node),this.node=null)}},{key:"observeNode",value:function(){if(this.node){var e=this.props;(0,l.observe)(this.node,this.handleChange,{threshold:e.threshold,root:e.root,rootMargin:e.rootMargin},e.rootId)}}},{key:"render",value:function(){var e=this.props,t=e.children,r=e.render,n=e.tag,i=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(e,["children","render","tag","innerRef","triggerOnce","threshold","root","rootId","rootMargin"]),s=this.state.inView;return a.createElement(n,o({},i,{ref:this.handleNode}),"function"==typeof r?r(s):null,"function"==typeof t?t(s):t)}}]),t}();s.defaultProps={tag:"div",threshold:0,triggerOnce:!1},r.default=s}));(i=e.ImageState||(e.ImageState={})).NotAsked="NotAsked",i.Loading="Loading",i.LoadSuccess="LoadSuccess",i.LoadError="LoadError";var d=function(n){function a(t){var r=n.call(this,t)||this;return r.state={hasBeenInView:!1,imageState:e.ImageState.NotAsked},r.onInView=r.onInView.bind(r),r.onLoadSuccess=r.onLoadSuccess.bind(r),r.onLoadError=r.onLoadError.bind(r),r}return function(e,t){function o(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}(a,n),a.prototype.onInView=function(t){!0===t&&(this.props.src?(this.setState(function(t,r){return o({},t,{imageState:e.ImageState.Loading})}),p({src:this.props.src,srcSet:this.props.srcSet,alt:this.props.alt}).then(this.onLoadSuccess).catch(this.onLoadError)):this.setState(function(t,r){return o({},t,{imageState:e.ImageState.LoadSuccess})}))},a.prototype.onLoadSuccess=function(){this.setState(function(t,r){return o({},t,{imageState:e.ImageState.LoadSuccess})})},a.prototype.onLoadError=function(){this.setState(function(t,r){return o({},t,{imageState:e.ImageState.LoadError})})},a.prototype.render=function(){var e=this.props,r=e.src,n=e.srcSet,a=e.alt,i=e.children,s=e.render,c=this.state.imageState;return t.createElement(f,o({rootMargin:"50px 0px",threshold:.01},e.observerProps,{onChange:this.onInView,triggerOnce:!0}),"function"==typeof s?s({src:r,srcSet:n,alt:a,imageState:c}):"function"==typeof i?i({src:r,srcSet:n,alt:a,imageState:c}):null)},a.displayName="LazyImageFull",a}(t.Component),p=function(e){var t=e.src,r=e.srcSet,o=e.alt;return new Promise(function(e,n){var a=new Image;r&&(a.srcset=r),o&&(a.alt=o),a.src=t,a.onload=e,a.onerror=n})},h=function(r){var n=r.actual,a=r.placeholder,i=r.loading,s=r.error,c=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&(r[o[n]]=e[o[n]])}return r}(r,["actual","placeholder","loading","error"]);return t.createElement(d,o({},c),function(t){var r=t.src,o=t.srcSet,c=t.alt;switch(t.imageState){case e.ImageState.NotAsked:return!!a&&a({alt:c});case e.ImageState.Loading:return i?i():!!a&&a({alt:c});case e.ImageState.LoadSuccess:return n({src:r,alt:c,srcSet:o});case e.ImageState.LoadError:return s?s():n({src:r,alt:c,srcSet:o})}})};h.displayName="LazyImage",e.LazyImage=h,e.LazyImageFull=d});
 //# sourceMappingURL=react-lazy-images.umd.js.map

dist/src/LazyImage.d.ts

@@ -25,4 +25,5 @@ /// <reference types="react" />
  * Component that preloads the image once it is in the viewport,
- * and then swaps it in.
+ * and then swaps it in. Has predefined rendering logic, but the
+ * specifics are up to the caller.
  */
 export declare const LazyImage: React.StatelessComponent<LazyImageProps>;

dist/src/LazyImageFull.d.ts

 /// <reference types="react" />
 import React from 'react';
-/** Values that the render props take
- */
-export interface RenderPropArgs {
-    state: ImageState;
-    src?: string;
-    srcSet?: string;
-}
+/** The component's state */
+export declare type LazyImageFullState = {
+    hasBeenInView: boolean;
+    imageState: ImageState;
+};
+/** States that the image loading can be in */
 export declare enum ImageState {
@@ -16,8 +15,4 @@ NotAsked = "NotAsked",
 }
-export declare type LazyImageFullState = {
-    hasBeenInView: boolean;
-    imageState: ImageState;
-};
 /**
- * Valid props for LazyImage
+ * Valid props for LazyImage components
  */
@@ -27,2 +22,3 @@ export interface CommonLazyImageProps {
     src: string;
+    /** The source set of the image to load */
     srcSet?: string;
@@ -38,6 +34,15 @@ /** Whether to skip checking for viewport and always show the 'actual' component
 }
+/** Valid props for LazyImageFull */
 export interface LazyImageFullProps extends CommonLazyImageProps {
     /** Children should be either a function or a node */
     children?: ((RenderPropArgs) => React.ReactNode) | React.ReactNode;
+    /** Render prop boolean indicating inView state */
+    render?: (RenderPropArgs) => React.ReactNode;
 }
+/** Values that the render props take */
+export interface RenderPropArgs {
+    state: ImageState;
+    src?: string;
+    srcSet?: string;
+}
 /** Subset of react-intersection-observer's props */
@@ -61,3 +66,4 @@ export interface ObserverProps {
  * Component that preloads the image once it is in the viewport,
- * and then swaps it in.
+ * and then swaps it in. Takes a render prop that allows to specify
+ * what is rendered based on the loading state.
  */
@@ -64,0 +70,0 @@ export declare class LazyImageFull extends React.Component<LazyImageFullProps, LazyImageFullState> {

package.json

 {
   "name": "react-lazy-images",
   "description": "React utilities for lazy image loading",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "source": "src/index.tsx",
@@ -9,2 +9,3 @@ "module": "dist/react-lazy-images.es.js",
   "umd:main": "dist/react-lazy-images.umd.js",
+  "types": "dist/index.d.ts",
   "scripts": {
@@ -52,9 +53,10 @@ "dev": "npm-run-all --parallel bundle:dev storybook",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.3.15",
-    "@storybook/addon-info": "^3.3.15",
-    "@storybook/addon-options": "^3.3.15",
-    "@storybook/addons": "^3.3.15",
-    "@storybook/react": "^3.3.15",
+    "@storybook/addon-actions": "4.0.0-alpha.3",
+    "@storybook/addon-info": "4.0.0-alpha.3",
+    "@storybook/addon-options": "4.0.0-alpha.3",
+    "@storybook/addons": "4.0.0-alpha.3",
+    "@storybook/react": "4.0.0-alpha.3",
     "@storybook/storybook-deployer": "^2.3.0",
     "@types/react": "^16.0.41",
+    "awesome-typescript-loader": "^5.0",
     "babel-core": "^6.26.0",
@@ -67,2 +69,5 @@ "bundlesize": "^0.17.0",
     "react": "^16.2.0",
+    "react-docgen-typescript": "^1.2.6",
+    "react-docgen-typescript-loader": "^2.0.3",
+    "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "react-dom": "^16.2.0",
@@ -69,0 +74,0 @@ "tachyons": "^4.9.1",

README.md

@@ -109,7 +109,13 @@ # React Lazy Images
   src="/img/porto_buildings_large.jpg"
-  placeholder={() => <img src="/img/porto_buildings_lowres.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />}
-  actual={() => <img src="/img/porto_buildings_large.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />}
+  alt="Buildings with tiled exteriors, lit by the sunset."
+  placeholder={({ alt }) => (
+    <img src="/img/porto_buildings_lowres.jpg" alt={alt} />
+  )}
+  actual={({ src, alt, srcSet }) => <img src={src} alt={alt} />}
 />;
 ```
 
+Note that while you can set the rendered components to be anything you want, you most likely want to use the same `src`, `srcSet` and `alt` attributes in an `<img>` eventually.
+To keep this consistent, and reduce repetition, the render callbacks pass those attributes back to you.
+
 [You can play around with this library on Codesandbox](https://codesandbox.io/s/jnn9wjkj1w).
@@ -134,11 +140,13 @@
   src="/img/porto_buildings_large.jpg"
-  // This is rendered first
+  alt="Buildings with tiled exteriors, lit by the sunset."
+
+  // This is rendered first, notice how the src is different
   placeholder={
-    () =>
-      <img src="/img/porto_buildings_lowres.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
+    ({alt}) =>
+      <img src="/img/porto_buildings_lowres.jpg" alt={alt} />
   }
-  // This is rendered once in view
+  // This is rendered once in view; we use the src and alt above for consistency
   actual={
-    () =>
-      <img src="/img/porto_buildings_large.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
+    ({src, alt}) =>
+      <img src={src} alt={alt} />
   }
@@ -149,12 +157,14 @@ />
 <LazyImage
+  src="/img/porto_buildings_large.jpg"
+  alt="Buildings with tiled exteriors, lit by the sunset."
   placeholder={
-    () =>
-      <div className={`LazyImage-Placeholder`}">
-        <img src="/img/porto_buildings_lowres.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
+    ({alt}) =>
+      <div className={'LazyImage-Placeholder'}">
+        <img src="/img/porto_buildings_lowres.jpg" alt={alt} />
       </div>
   }
   actual={
-    () =>
-      <div className={`LazyImage-Actual`}>
-        <img src="/img/porto_buildings_large.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
+    ({src, alt}) =>
+      <div className={'LazyImage-Actual'}>
+        <img src={src} alt={alt} />
       </div>
@@ -177,7 +187,9 @@ }
 // Function as child
-<LazyImageFull>
-  {({src, srcSet, imageState}) =>
+// `src`, `alt` and `srcSet` are passed back to the render callback for convenience/consistency
+<LazyImageFull src='/img/porto_buildings_large.jpg'>
+  {({src, alt, srcSet, imageState}) =>
     <img
-      src={imageState === ImageState.LoadSuccess ? '/img/porto_buildings_large.jpg' : '/img/porto_buildings_lowres.jpg'} style={{opacity: ImageState.LoadSuccess ? '1' : '0.5'}} 
-      alt="Buildings with tiled exteriors, lit by the sunset." />
+      src={imageState === ImageState.LoadSuccess ? src : '/img/porto_buildings_lowres.jpg'}
+      alt={alt}
+      style={{opacity: ImageState.LoadSuccess ? '1' : '0.5'}}
     />
@@ -189,8 +201,11 @@ }
 <LazyImageFull
-  render={({src, srcSet, imageState}) =>
+  src='/img/porto_buildings_large.jpg'
+  render={({src, alt, srcSet, imageState}) =>
     <img
-      src={imageState === ImageState.LoadSuccess ? '/img/porto_buildings_large.jpg' : '/img/porto_buildings_lowres.jpg'} style={{opacity: ImageState.LoadSuccess ? '1' : '0.5'}} 
-      alt="Buildings with tiled exteriors, lit by the sunset." />
-    />}
-  />
+      src={imageState === ImageState.LoadSuccess ? src : '/img/porto_buildings_lowres.jpg'}
+      alt={alt}
+      style={{opacity: ImageState.LoadSuccess ? '1' : '0.5'}}
+    />
+  }
+/>
 ```
@@ -221,12 +236,13 @@
   src="/img/porto_buildings_large.jpg"
+  alt="Buildings with tiled exteriors, lit by the sunset."
   placeholder={
-    () =>
+    ({alt}) =>
       <div className={`LazyImage-Placeholder`}">
-        <img src="/img/porto_buildings_lowres.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
+        <img src="/img/porto_buildings_lowres.jpg" alt={alt} />
       </div>
   }
   actual={
-    () =>
+    ({src, alt}) =>
       <div className={`LazyImage-Actual`}>
-        <img src="/img/porto_buildings_large.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
+        <img src={src} alt={alt} />
       </div>
@@ -246,4 +262,5 @@ }
   <LazyImage
-    src="https://www.fillmurray.com/notanimage"
-    actual={() => <img src="/img/porto_buildings_large.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />}
+    src="/image/brokenimagenotherewhoops.jpg"
+    alt="Buildings with tiled exteriors, lit by the sunset."
+    actual={({ src, alt }) => <img src={src} alt={alt} />}
     loading={() => (
@@ -278,10 +295,7 @@ <div>
   src="/img/porto_buildings_large.jpg"
-  placeholder={
-    () =>
-      <img src="/img/porto_buildings_lowres.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
-  }
-  actual={
-    () =>
-      <img src="/img/porto_buildings_large.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
-  }
+  alt="Buildings with tiled exteriors, lit by the sunset."
+  placeholder={({ alt }) => (
+    <img src="/img/porto_buildings_lowres.jpg" alt={alt} />
+  )}
+  actual={({ src, alt }) => <img src={src} alt={alt} />}
 />
@@ -318,3 +332,3 @@ ```
 // Placeholder since JS has not run; will be hidden with the style above.
-<img src="/img/porto_buildings_lowres.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
+<img class="LazyImage" src="/img/porto_buildings_lowres.jpg" alt="Buildings with tiled exteriors, lit by the sunset." />
 
@@ -328,14 +342,14 @@ // Declare the actual image as you would, inside a noscript
 Until v0.3.0, this library had a fallback API, in the form of a `fallback` render prop.
-This has been disabled due to issues with `<noscript>` in react causing the fallback to always load.
+This has been disabled due to issues with `<noscript>` in React causing the fallback to always load.
 
 (See https://github.com/facebook/react/issues/11423 for more details)
 
-Current solutions involve either using `dangerouslySetInnerHTML`, which is not safe, or `ReactDOMServer.renderToStaticMarkup`.
+Current solutions involve either using `dangerouslySetInnerHTML`, which is not safe for arbitrary library use, or `ReactDOMServer.renderToStaticMarkup`.
 I thought it would be irresponsible to hide the fact that `dangerouslySetInnerHTML` is used from the user, so that excludes the first option.
 I also think that using the server method, albeit safe, would be messy with some bundling configurations (which would keep the entirety of `react-dom/server`).
 
-Silver lining:
+**Silver lining:**
 
-There is generally no case where `<noscript>` will be rendered by client-side react, which means that, if you are in charge of server-rendering and
-you trust your bundling setup, then you can have this fallback!
+There is generally no case where `<noscript>` will be rendered by client-side react.
+This means that, if you are in charge of server-rendering and you trust your bundling setup, then you can have this fallback!
 Look at [`src/fallbackUtils.tsx`](./src/fallbackUtils.tsx) for a function that can work.
@@ -347,2 +361,3 @@ You would probably do something like this:
   src="actualImgSrc"
+  alt="alt description here"
   placeholder={//the usual}
@@ -404,2 +419,9 @@ actual={//the usual}
 
+You might be thinking that this library has a lot of wiring exposed.
+This is very much intended.
+If this library were to provide presentational patterns out of the box, then it would lead to many issues and PRs about what ultimately is opinion.
+Being inclined to fork a library just to add a prop is not a nice situation to be in, compared to writing one abstracted component for your specific use case.
+The behaviour and loading patterns are configurable, because those are what this library is about.
+The presentation can be derived from those plus, crucially, any specific needs your application has.
+
 ## API Reference
@@ -409,26 +431,28 @@
 
-| Name              | Type                                    | Default                                   | Required | Description                                                                                           |
-| ----------------- | --------------------------------------- | ----------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
-| **src**           | String                                  |                                           | true     | The source of the image to load                                                                       |
-| **srcSet**        | String                                  |                                           | false    | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
-| **actual**        | Function (render prop)                  |                                           | true     | Component to display once image has loaded                                                            |
-| **placeholder**   | Function (render prop)                  | undefined                                 | false    | Component to display while no request for the actual image has been made                              |
-| **loading**       | Function (render prop)                  | placeholder                               | false    | Component to display while the image is loading                                                       |
-| **error**         | Function (render prop)                  | actual (broken image)                     | false    | Component to display if the image loading has failed (render prop)                                    |
-| **loadEagerly**   | Boolean                                 | false                                     | false    | Whether to skip checking for viewport and always show the 'actual' component                          |
-| **observerProps** | {threshold: number, rootMargin: string} | {threshold: 0.01, rootMargin: "50px 0px"} | false    | Subset of props for the IntersectionObserver                                                          |
+| Name              | Type                                                                       | Default                                   | Required | Description                                                                                           |
+| ----------------- | -------------------------------------------------------------------------- | ----------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
+| **src**           | String                                                                     |                                           | true     | The source of the image to load                                                                       |
+| **alt**           | String                                                                     |                                           | false    | The alt text description of the image you are loading                                                 |
+| **srcSet**        | String                                                                     |                                           | false    | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
+| **actual**        | Function (render callback) of type ({src, alt, srcSet}) => React.ReactNode |                                           | true     | Component to display once image has loaded                                                            |
+| **placeholder**   | Function (render callback) of type ({alt}) => React.ReactNode              | undefined                                 | false    | Component to display while no request for the actual image has been made                              |
+| **loading**       | Function (render callback) of type () => React.ReactNode                   | placeholder                               | false    | Component to display while the image is loading                                                       |
+| **error**         | Function (render callback) of type () => React.ReactNode                   | actual (broken image)                     | false    | Component to display if the image loading has failed (render prop)                                    |
+| **loadEagerly**   | Boolean                                                                    | false                                     | false    | Whether to skip checking for viewport and always show the 'actual' component                          |
+| **observerProps** | {threshold: number, rootMargin: string}                                    | {threshold: 0.01, rootMargin: "50px 0px"} | false    | Subset of props for the IntersectionObserver                                                          |
 
-[You can consult Typescript types in the code](./src/LazyImage.tsx) as a more exact definition.
-
 **`<LazyImageFull />`** accepts the following props:
 
-| Name              | Type                                                            | Default                                   | Required             | Description                                                                                           |
-| ----------------- | --------------------------------------------------------------- | ----------------------------------------- | -------------------- | ----------------------------------------------------------------------------------------------------- |
-| **src**           | String                                                          |                                           | true                 | The source of the image to load                                                                       |
-| **srcSet**        | String                                                          |                                           | false                | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
-| **loadEagerly**   | Boolean                                                         | false                                     | false                | Whether to skip checking for viewport and always show the 'actual' component                          |
-| **observerProps** | {threshold: number, rootMargin: string}                         | {threshold: 0.01, rootMargin: "50px 0px"} | false                | Subset of props for the IntersectionObserver                                                          |
-| **render**        | Function of type ({src, srcSet, imageState}) => React.ReactNode |                                           | true (or `children`) | Function to call that renders based on the props and state provided to it by LazyImageFull            |
-| **children**      | Function of type ({src, srcSet, imageState}) => React.ReactNode |                                           | true (or `render`)   | Function to call that renders based on the props and state provided to it by LazyImageFull            |
+| Name              | Type                                                                 | Default                                   | Required             | Description                                                                                           |
+| ----------------- | -------------------------------------------------------------------- | ----------------------------------------- | -------------------- | ----------------------------------------------------------------------------------------------------- |
+| **src**           | String                                                               |                                           | true                 | The source of the image to load                                                                       |
+| **alt**           | String                                                               |                                           | false                | The alt text description of the image you are loading                                                 |
+| **srcSet**        | String                                                               |                                           | false                | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
+| **loadEagerly**   | Boolean                                                              | false                                     | false                | Whether to skip checking for viewport and always show the 'actual' component                          |
+| **observerProps** | {threshold: number, rootMargin: string}                              | {threshold: 0.01, rootMargin: "50px 0px"} | false                | Subset of props for the IntersectionObserver                                                          |
+| **render**        | Function of type ({src, alt, srcSet, imageState}) => React.ReactNode |                                           | true (or `children`) | Function to call that renders based on the props and state provided to it by LazyImageFull            |
+| **children**      | Function of type ({src, alt, srcSet, imageState}) => React.ReactNode |                                           | true (or `render`)   | Function to call that renders based on the props and state provided to it by LazyImageFull            |
 
+[You can consult Typescript types in the code](./src/LazyImage.tsx) for more context.
+
 ## Feedback
@@ -448,15 +472,17 @@
 
-Jeremy Wagner's writing on [Lazy Loading Images and Video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/) is a good reference for the problem and solutions space.
+Here are some resources whose ideas resonate with me and have informed this library.
 
-The library backing this one, [react-intersection-observer library](https://github.com/thebuilder/react-intersection-observer).
-Further thanks for demonstrating Storybook as documentation for lazy-loading.
+* Jeremy Wagner's writing on [Lazy Loading Images and Video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/) is a good reference for the problem and solutions space.
 
-[Paul Lewis' implementation of lazy image loading](https://github.com/GoogleChromeLabs/sample-media-pwa/blob/master/src/client/scripts/helpers/lazy-load-images.js) has the concept of pre-loading images before swapping.
+* The library backing this one, [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer).
+  Further thanks for demonstrating Storybook as documentation for lazy-loading.
 
-[Dave Rupert has a good guide on intrinsic image placeholders](https://daverupert.com/2015/12/intrinsic-placeholders-with-picture/)
+* [José M. Pérez has a good resource on lazy loading](https://jmperezperez.com/high-performance-lazy-loading/)
 
-[How Medium does lazy image loading](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)
+* [Paul Lewis' implementation of lazy image loading](https://github.com/GoogleChromeLabs/sample-media-pwa/blob/master/src/client/scripts/helpers/lazy-load-images.js) has the concept of pre-loading images before swapping.
 
+* [Dave Rupert has a good guide on intrinsic image placeholders](https://daverupert.com/2015/12/intrinsic-placeholders-with-picture/)
+
 ## License
 
 MIT License © Fotis Papadogeorgopoulos

No alert changes

Improved metrics

Total package byte prevSize

150604

increased by28.75%

Lines of code

663

increased by8.33%

Number of lines in readme file

475

increased by5.79%

Worsened metrics

Dev dependency count

21

increased by23.53%

No dependency changes