refactor: rename InvisibleComponent to fallback

BREAKING CHANGE: You should rename `InvisibleComponent` to `fallback` .
hiroki0525 · Oct 19, 2022 · 0b25cfe · 0b25cfe
1 parent 3dc2ee4
commit 0b25cfe
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ const App = () => (
         {/* This will optimize Core Web Vitals */}
         <LazyLoad
           as='footer'
-          InvisibleComponent={<Loading />}
+          fallback={<Loading />}
           rootMargin='200px 0px'
           suspense
         >
@@ -51,7 +51,7 @@ ReactDOM.render(<App />, document.body);
 | Name               | Required | Type                   | Default | Description                                                                                                                                                                                                                                                                                         |
 |--------------------|----------|------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | children           | Yes      | ReactNode              | -       | Component is rendered when it is in the viewport. Automatically enable `React.Suspense` if you use `React.lazy` .                                                                                                                                                                                   |
-| InvisibleComponent | No       | ReactNode              | null    | Component is rendered when it is not in the viewport.                                                                                                                                                                                                                                               |
+| fallback | No       | ReactNode              | null    | Component is rendered when it is not in the viewport.                                                                                                                                                                                                                                               |
 | rootId             | No       | string                 | -       | The id of element which is `IntersectionObserver`'s target. If `rootId` is not specified, then the bounds of the actual document viewport are used. This prop wraps [IntersectionObserver.root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) because of performance. |
 | rootMargin         | No       | string                 | -       | Please see [IntersectionObserver.rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin).                                                                                                                                                                     |
 | threshold          | No       | number &#124; number[] | -       | Please see [IntersectionObserver.thresholds](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds).                                                                                                                                                                     |

diff --git a/examples/src/site/Main.tsx b/examples/src/site/Main.tsx
@@ -54,7 +54,7 @@ export default function Main() {
             <LazyLoad
               key={index}
               rootId='cat-list'
-              InvisibleComponent={<Loading />}
+              fallback={<Loading />}
               as='li'
             >
               <CatItem name={name} />

diff --git a/examples/src/site/Site.tsx b/examples/src/site/Site.tsx
@@ -17,7 +17,7 @@ export default function Site() {
         <h1>Cats Lovers</h1>
       </header>
       <Main />
-      <LazyLoad InvisibleComponent={<Loading />} as='footer'>
+      <LazyLoad fallback={<Loading />} as='footer'>
         <Footer />
       </LazyLoad>
     </>

diff --git a/examples/src/usage/ForceVisibleExample.tsx b/examples/src/usage/ForceVisibleExample.tsx
@@ -22,7 +22,7 @@ export default function ForceVisibleExample() {
         {[...Array(5)].map((_, index) => (
           <LazyLoad
             key={`demo3-${index}`}
-            InvisibleComponent='Invisible'
+            fallback='Invisible'
             rootId='forceVisible'
             as='li'
             className='row'

diff --git a/examples/src/usage/Usage.tsx b/examples/src/usage/Usage.tsx
@@ -14,7 +14,7 @@ export default function Usage() {
           {[...Array(10)].map((_, index) => (
             <LazyLoad
               key={`demo1-${index}`}
-              InvisibleComponent='Invisible'
+              fallback='Invisible'
               rootId='onceIsTrue'
               as='li'
               className='row'
@@ -30,7 +30,7 @@ export default function Usage() {
           {[...Array(10)].map((_, index) => (
             <LazyLoad
               key={`demo2-${index}`}
-              InvisibleComponent='Invisible'
+              fallback='Invisible'
               rootId='onceIsFalse'
               as='li'
               className='row'
@@ -45,7 +45,7 @@ export default function Usage() {
         <h2>Suspense</h2>
         <LazyLoad
           id='suspense'
-          InvisibleComponent='Invisible'
+          fallback='Invisible'
           rootMargin='200px 0px'
           suspense
         >

diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -26,7 +26,7 @@ describe('LazyLoad', () => {
   const defaultProps: ExcludeChildrenLazyLoadProps = {
     rootId,
     'data-testid': testId,
-    InvisibleComponent: invisibleText,
+    fallback: invisibleText,
   };
 
   afterEach(() => {

diff --git a/src/index.tsx b/src/index.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react';
 
 export type LazyLoadProps = {
-  InvisibleComponent?: ReactNode;
+  fallback?: ReactNode;
   children: ReactNode;
   as?: ElementType;
   forceVisible?: boolean;
@@ -22,7 +22,7 @@ export type LazyLoadProps = {
 } & Omit<IntersectionObserverInit, 'root'>;
 
 export default function LazyLoad({
-  InvisibleComponent = null,
+  fallback,
   children,
   forceVisible = false,
   rootId,
@@ -88,12 +88,12 @@ export default function LazyLoad({
     };
   }, [once, rootMargin, threshold]);
 
-  const displayComponent = isVisible ? children : InvisibleComponent;
+  const displayComponent = isVisible ? children : fallback;
 
   return (
     <Tag ref={targetRef} {...props}>
       {suspense ? (
-        <Suspense fallback={InvisibleComponent}>{displayComponent}</Suspense>
+        <Suspense fallback={fallback}>{displayComponent}</Suspense>
       ) : (
         displayComponent
       )}