Bug fix 3.0.1 (#25)

* Fix botched main entrypoint in package.json

* Fix @loadable-components fallback and hold ref to IO element

* Update README with new fallback option for @loadable/component

Author: Tasveer Singh

README.md

@@ -27,7 +27,7 @@ import loadableVisibility from "react-loadable-visibility/loadable-components";
 import Loading from "./my-loading-component";
 
 const LoadableComponent = loadableVisibility(() => import("./my-component"), {
-  fallback: Loading
+  fallback: <Loading />
 });
 
 export default function App() {

package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-loadable-visibility",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A wrapper around react-loadable for elements that are visible on the page",
-  "main": "lib/index.js",
+  "main": "index.js",
   "repository": "https://github.com/stratiformltd/react-loadable-visibility",
   "author": "Tasveer Singh",
   "license": "BSD-3-Clause",

src/createLoadableVisibilityComponent.js

@@ -44,11 +44,13 @@ function createLoadableVisibilityComponent(
     }
 
     useEffect(() => {
-      if (!isVisible && visibilityElementRef.current) {
+      const element = visibilityElementRef.current;
+
+      if (!isVisible && element) {
         visibilityHandlers.push(visibilityHandler);
 
-        trackedElements.set(visibilityElementRef.current, visibilityHandler);
-        intersectionObserver.observe(visibilityElementRef.current);
+        trackedElements.set(element, visibilityHandler);
+        intersectionObserver.observe(element);
 
         return () => {
           const handlerIndex = visibilityHandlers.indexOf(visibilityHandler);
@@ -57,8 +59,8 @@ function createLoadableVisibilityComponent(
             visibilityHandlers.splice(handlerIndex, 1);
           }
 
-          intersectionObserver.unobserve(visibilityElementRef.current);
-          trackedElements.delete(visibilityElementRef.current);
+          intersectionObserver.unobserve(element);
+          trackedElements.delete(element);
         };
       }
     }, [isVisible, visibilityElementRef.current]);
@@ -67,7 +69,7 @@ function createLoadableVisibilityComponent(
       return <LoadableComponent {...props} />;
     }
 
-    if (LoadingComponent) {
+    if (LoadingComponent || props.fallback) {
       return (
         <div
           style={{
@@ -78,9 +80,12 @@ function createLoadableVisibilityComponent(
           {...props}
           ref={visibilityElementRef}
         >
-          {React.createElement(LoadingComponent, {
-            isLoading: true
-          })}
+          {LoadingComponent
+            ? React.createElement(LoadingComponent, {
+                isLoading: true,
+                ...props
+              })
+            : props.fallback}
         </div>
       );
     }

src/loadable-components.js

@@ -8,7 +8,7 @@ function loadableVisiblity(load, opts = {}) {
     return createLoadableVisibilityComponent([load, opts], {
       Loadable: loadable,
       preloadFunc: "preload",
-      loadingComponent: () => opts.LoadingComponent
+      LoadingComponent: opts.fallback ? () => opts.fallback : null
     });
   } else {
     return loadable(load, opts);