diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md
index a0573fb8f7..b54e596485 100644
--- a/core/src/components/infinite-scroll-content/readme.md
+++ b/core/src/components/infinite-scroll-content/readme.md
@@ -2,10 +2,6 @@
 
 The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
 
-## React
-
-The `ion-infinite-scroll-content` component is not supported in React.
-
 <!-- Auto Generated Below -->
 
 
@@ -39,6 +35,25 @@ The `ion-infinite-scroll-content` component is not supported in React.
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
+
+export const InfiniteScrollExample: React.FC = () => (
+  <IonContent>
+    <IonInfiniteScroll>
+      <IonInfiniteScrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data...">
+      </IonInfiniteScrollContent>
+    </IonInfiniteScroll>
+  </IonContent>
+);
+```
+
+
 ### Stencil
 
 ```tsx
diff --git a/core/src/components/infinite-scroll-content/usage/react.md b/core/src/components/infinite-scroll-content/usage/react.md
new file mode 100644
index 0000000000..a966a9ffc0
--- /dev/null
+++ b/core/src/components/infinite-scroll-content/usage/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
+
+export const InfiniteScrollExample: React.FC = () => (
+  <IonContent>
+    <IonInfiniteScroll>
+      <IonInfiniteScrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data...">
+      </IonInfiniteScrollContent>
+    </IonInfiniteScroll>
+  </IonContent>
+);
+```
\ No newline at end of file
diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md
index 0f83570bc8..1a9e7a2d84 100644
--- a/core/src/components/infinite-scroll/readme.md
+++ b/core/src/components/infinite-scroll/readme.md
@@ -111,6 +111,106 @@ function toggleInfiniteScroll() {
 ```
 
 
+### React
+
+```tsx
+import { 
+  IonButton,
+  IonContent, 
+  IonHeader,
+  IonInfiniteScroll, 
+  IonInfiniteScrollContent, 
+  IonItem,
+  IonLabel,
+  IonList,  
+  IonPage, 
+  IonTitle, 
+  IonToolbar,
+  useIonViewWillEnter
+} from '@ionic/react';
+import { useState } from 'react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Home.css';
+
+const InfiniteScrollExample: React.FC = () => {
+  const [data, setData] = useState<string[]>([]);
+  const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
+  
+  const pushData = () => {
+    const max = data.length + 20;
+    const min = max - 20;
+    const newData = [];
+    for (let i = min; i < max; i++) {
+      newData.push('Item' + i);
+    }
+    
+    setData([
+      ...data,
+      ...newData
+    ]);
+  }
+  const loadData = (ev: any) => {
+    setTimeout(() => {
+      pushData();
+      console.log('Loaded data');
+      ev.target.complete();
+      if (data.length == 1000) {
+        setInfiniteDisabled(true);
+      }
+    }, 500);
+  }  
+  
+  useIonViewWillEnter(() => {
+    pushData();
+  });
+  
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Blank</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Blank</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        
+        <IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
+          Toggle Infinite Scroll
+        </IonButton>
+        
+        <IonList>
+          {data.map((item, index) => {
+            return (
+              <IonItem key={index}>
+                <IonLabel>{item}</IonLabel>
+              </IonItem>
+            )
+          })}
+        </IonList>
+        
+        <IonInfiniteScroll
+          onIonInfinite={loadData}
+          threshold="100px"
+          disabled={isInfiniteDisabled}
+        >
+          <IonInfiniteScrollContent
+            loadingSpinner="bubbles"
+            loadingText="Loading more data..."
+          ></IonInfiniteScrollContent>
+        </IonInfiniteScroll>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default InfiniteScrollExample;
+```
+
+
 ### Stencil
 
 ```tsx
diff --git a/core/src/components/infinite-scroll/usage/react.md b/core/src/components/infinite-scroll/usage/react.md
new file mode 100644
index 0000000000..3298bdc23b
--- /dev/null
+++ b/core/src/components/infinite-scroll/usage/react.md
@@ -0,0 +1,96 @@
+```tsx
+import { 
+  IonButton,
+  IonContent, 
+  IonHeader,
+  IonInfiniteScroll, 
+  IonInfiniteScrollContent, 
+  IonItem,
+  IonLabel,
+  IonList,  
+  IonPage, 
+  IonTitle, 
+  IonToolbar,
+  useIonViewWillEnter
+} from '@ionic/react';
+import { useState } from 'react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Home.css';
+
+const InfiniteScrollExample: React.FC = () => {
+  const [data, setData] = useState<string[]>([]);
+  const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
+  
+  const pushData = () => {
+    const max = data.length + 20;
+    const min = max - 20;
+    const newData = [];
+    for (let i = min; i < max; i++) {
+      newData.push('Item' + i);
+    }
+    
+    setData([
+      ...data,
+      ...newData
+    ]);
+  }
+  const loadData = (ev: any) => {
+    setTimeout(() => {
+      pushData();
+      console.log('Loaded data');
+      ev.target.complete();
+      if (data.length == 1000) {
+        setInfiniteDisabled(true);
+      }
+    }, 500);
+  }  
+  
+  useIonViewWillEnter(() => {
+    pushData();
+  });
+  
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Blank</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Blank</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        
+        <IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
+          Toggle Infinite Scroll
+        </IonButton>
+        
+        <IonList>
+          {data.map((item, index) => {
+            return (
+              <IonItem key={index}>
+                <IonLabel>{item}</IonLabel>
+              </IonItem>
+            )
+          })}
+        </IonList>
+        
+        <IonInfiniteScroll
+          onIonInfinite={loadData}
+          threshold="100px"
+          disabled={isInfiniteDisabled}
+        >
+          <IonInfiniteScrollContent
+            loadingSpinner="bubbles"
+            loadingText="Loading more data..."
+          ></IonInfiniteScrollContent>
+        </IonInfiniteScroll>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default InfiniteScrollExample;
+```
\ No newline at end of file