Pass ref, use prop collection

Author: fpapado

ROADMAP.md

@@ -7,8 +7,10 @@
 
 - [x] Upgrade devDeps
 - [x] Upgrade microbundle
-- [ ] Check --external all consequence
-- [ ] Upgrade react-intersection-observer
+- [x] Check --external all consequence
+- [x] Upgrade react-intersection-observer
+- [ ] Pass Ref
+- [ ] Prop getter
 - [ ] Split out renderXYZ components
 - [ ] Refactor props
 - [ ] Props getter

package.json

@@ -8,7 +8,7 @@
   "umd:main": "dist/react-lazy-images.umd.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "dev": "npm-run-all --parallel bundle:dev storybook",
+    "dev": "npm-run-all bundle:dev storybook",
     "dev:ts": "tsc --watch --pretty",
     "build": "npm-run-all bundle:prod size",
     "bundle:dev": "microbundle --watch --compress false",

src/LazyImage.tsx

@@ -50,23 +50,25 @@ export const LazyImage: React.StatelessComponent<LazyImageProps> = ({
   ...rest
 }) => (
   <LazyImageFull {...rest}>
-    {({ src, srcSet, alt, imageState }) => {
+    {({ imageState, imageProps }) => {
       // Call the appropriate render callback based on the state
       // and the props specified, passing on relevant props.
       switch (imageState) {
         case ImageState.NotAsked:
-          return !!placeholder && placeholder({ alt });
+          return !!placeholder && placeholder(imageProps);
 
         case ImageState.Loading:
           // Only render loading if specified, otherwise placeholder
-          return !!loading ? loading() : !!placeholder && placeholder({ alt });
+          return !!loading
+            ? loading()
+            : !!placeholder && placeholder(imageProps);
 
         case ImageState.LoadSuccess:
-          return actual({ src, alt, srcSet });
+          return actual(imageProps);
 
         case ImageState.LoadError:
           // Only render error if specified, otherwise actual (broken image)
-          return !!error ? error() : actual({ src, alt, srcSet });
+          return !!error ? error() : actual(imageProps);
       }
     }}
   </LazyImageFull>

src/LazyImageFull.tsx

@@ -1,7 +1,5 @@
 import React from "react";
-import Observer, {
-  IntersectionObserverProps
-} from "react-intersection-observer";
+import Observer from "react-intersection-observer";
 
 /**
  * Valid props for LazyImage components
@@ -39,10 +37,14 @@ export interface LazyImageFullProps extends CommonLazyImageProps {
 /** Values that the render props take */
 export interface RenderCallbackArgs {
   imageState: ImageState;
-  src?: string;
-  srcSet?: string;
-  alt?: string;
-  sizes?: string;
+  imageProps: {
+    src?: string;
+    srcSet?: string;
+    alt?: string;
+    sizes?: string;
+    /** When not loading eagerly, a ref to bind to the DOM element. This is needed for the intersection calculation to work. */
+    ref?: React.RefObject<{}>;
+  };
 }
 
 /** Subset of react-intersection-observer's props */
@@ -146,11 +148,11 @@ export class LazyImageFull extends React.Component<
 
   // Render function
   render() {
-    const { children, loadEagerly, observerProps, ...cbProps } = this.props;
+    const { children, loadEagerly, observerProps, ...imageProps } = this.props;
 
     if (loadEagerly) {
       // If eager, skip the observer and view changing stuff; resolve the imageState as loaded.
-      return children({ imageState: ImageState.LoadSuccess, ...cbProps });
+      return children({ imageState: ImageState.LoadSuccess, imageProps });
     } else {
       return (
         <Observer
@@ -160,7 +162,9 @@ export class LazyImageFull extends React.Component<
           onChange={this.onInView}
           triggerOnce
         >
-          {children({ imageState: this.state.imageState, ...cbProps })}
+          {({ ref }) =>
+            children({ imageState: this.state.imageState, imageProps })
+          }
         </Observer>
       );
     }

src/react-intersection-observer.d.ts

@@ -0,0 +1,71 @@
+/* Custom react-interesction-observer types, that match upstream */
+declare module "react-intersection-observer" {
+  import React = require("react");
+
+  export interface RenderCallbackArgs {
+    inView: boolean;
+    ref: React.RefObject<{}>;
+  }
+
+  export interface IntersectionObserverProps {
+    /** Children should be either a function or a node */
+    children?:
+      | React.ReactNode
+      | ((args: RenderCallbackArgs) => React.ReactNode);
+
+    /** Render prop boolean indicating inView state */
+    render?(inView: boolean): React.ReactNode;
+
+    /**
+     * The `HTMLElement` that is used as the viewport for checking visibility of
+     * the target.
+     * Defaults to the browser viewport if not specified or if `null`.
+     */
+    root?: HTMLElement | null;
+
+    /**
+     * Unique identifier for the root element - This is used to identify the
+     * `IntersectionObserver` instance, so it can be reused.
+     * If you defined a root element, without adding an `id`, it will create a new
+     * instance for all components.
+     */
+    rootId?: string;
+
+    /**
+     * Margin around the root.
+     * Can have values similar to the CSS margin property,
+     * e.g. `"10px 20px 30px 40px"` (top, right, bottom, left).
+     */
+    rootMargin?: string;
+
+    /**
+     * Element tag to use for the wrapping component
+     * @default `'div'`
+     */
+    tag?: string;
+
+    /** Number between 0 and 1 indicating the the percentage that should be
+     * visible before triggering. Can also be an array of numbers, to create
+     * multiple trigger points.
+     * @default `0`
+     */
+    threshold?: number | number[];
+
+    /**
+     * Only trigger this method once
+     * @default `false`
+     */
+    triggerOnce?: boolean;
+
+    /** Call this function whenever the in view state changes */
+    onChange?(inView: boolean | React.FormEvent<HTMLElement>): void;
+
+    /** Get a reference to the the inner DOM node */
+    innerRef?(element?: HTMLElement): void;
+  }
+
+  export default class IntersectionObserver extends React.Component<
+    IntersectionObserverProps,
+    {}
+  > {}
+}

stories/utils.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const Container = ({ children }) => (
+export const Container: React.SFC<{}> = ({ children }) => (
   <div className="pa3 near-black bg-washed-yellow">
     <div
       className="flex justify-center items-center"

tsconfig.json

@@ -12,7 +12,11 @@
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "lib": ["es6", "dom"]
+    "lib": ["es6", "dom"],
+    "baseUrl": "./",
+    "paths": {
+      "react-intersection-observer": ["src/react-intersection-observer.d.ts"]
+    }
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]