{"id":97205,"date":"2019-09-25T07:00:14","date_gmt":"2019-09-25T04:00:14","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=97205"},"modified":"2019-09-23T11:05:44","modified_gmt":"2019-09-23T08:05:44","slug":"reactjs-infinite-scroll-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html","title":{"rendered":"ReactJS Infinite Scroll Example"},"content":{"rendered":"<p>In this article, we implement the Infinite scroll feature in a ReactJS application. This feature allows us to load and present additional content as the user scrolls the container. It creates an impression of seemingly infinite content and thus the name infinite scroll. In this article, we will create a container that, when scrolled would load additional content into the container. We will wrap this feature up into a React component to make it flexible and reusable across applications. <\/p>\n<p>Although there are many ready components of this nature available, we will implement our own from scratch. So, let&#8217;s get started.<\/p>\n<h2 class=\"wp-block-heading\">1. Tools and Frameworks<\/h2>\n<p>We use the below toolset for this example, some of these you can replace with those of your own choice. While others are mandatory to follow along with the example.<\/p>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.npmjs.com\/package\/create-react-app\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"create-react-app Package (opens in a new tab)\">create-react-app Package<\/a><\/li>\n<\/ul>\n<p>This npm package allows us to quickly create a skeletal React app that serves the purpose of this example.<\/p>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Visual Studio Code IDE (opens in a new tab)\">Visual Studio Code IDE<\/a><\/li>\n<\/ul>\n<p>This IDE is my editor of choice while working with React but there are other options out there and you can switch to your own.<\/p>\n<h2 class=\"wp-block-heading\">2. Initial Setup<\/h2>\n<p>To start off we use the create-react-app to create the starting point of this example. Running the below command creates our application and opens it up in Visual Studio Editor for editing.<\/p>\n<pre class=\"brush: bash;\">&gt; npx create-react-app my-app .\n<\/pre>\n<p>Once this command completes we execute the below after switching to the directory where our app resides.<\/p>\n<pre class=\"brush: bash;\">&gt;code .\n<\/pre>\n<p>Now we need to add the following npm packages to setup our example.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<ul>\n<li>Typescript<\/li>\n<\/ul>\n<p>We are using Typescript to write our code for this example and thus need to install typescript for the purpose.<\/p>\n<ul>\n<li>React Typings<\/li>\n<\/ul>\n<p>React typings are required when using typescript to write a React Application.<\/p>\n<ul>\n<li>React Polyfill<\/li>\n<\/ul>\n<p>\nThis allows our application to run in the latest IE browser.<\/p>\n<p>We can install the above dependencies by running the below command at the root of the project.<\/p>\n<pre class=\"brush: bash;\">&gt; npm install typescript @types\/react react-app-polyfill --save\n<\/pre>\n<p>Once the above command completes we are good to go and can start implementing our infinite scroll feature.<\/p>\n<h2 class=\"wp-block-heading\">3. Project Structure<\/h2>\n<p>The initial application or folder structure should look like below.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"364\" height=\"574\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/09\/InfiniteScrollStructure.jpg\" alt=\"ReactJS Infinite Scroll - Folder Structure\" class=\"wp-image-98352\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/09\/InfiniteScrollStructure.jpg 364w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/09\/InfiniteScrollStructure-190x300.jpg 190w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/><figcaption>Folder Structure<\/figcaption><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">4. Implementation<\/h2>\n<p>Now I&#8217;ll add a file called InfiniteScroll.tsx which will be a class component and an infinitely scrolling container. In the render method of our component we return a  simple <code>div<\/code> decorated with the CSS class <code>scroller<\/code>. We also handle the <code>onScroll<\/code> event of this container. Through the CSS below we accomplish the following.<\/p>\n<p>Disable the horizontal scrollbar and hide the vertical scrollbar across browsers but still keep the <code>div<\/code> scrollable.<\/p>\n<p><span style=\"text-decoration: underline\"><em>InfiniteScroll.css<\/em><\/span><\/p>\n<pre class=\"brush: css;\">.scroller {\n  width: 50%;\n  height: 240px;\n  background-color: green;\n  overflow: scroll;\n  overflow-x: hidden;\n  \/* IE Hide Scrollbar *\/\n  -ms-overflow-style: none;\n}\n\n\/* Chrome Hide Scrollbar *\/\n.scroller::-webkit-scrollbar {\n  width: 0 !important;\n}\n\n\/* Firefox Hide Scrollbar *\/\n.scroller {\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n}\n\n<\/pre>\n<p>We import this file into our component and our component looks like below<\/p>\n<p><span style=\"text-decoration: underline\"><em>InfiniteScroll.tsx<\/em><\/span><\/p>\n<pre class=\"brush: js;\">import React from 'react';\nimport '.\/InfiniteScroll.css';\n\nclass InfiniteScroll extends \nReact.Component {\n    scroll: any;\n    scroller: any;\n   \n    constructor(props: any) {\n        super(props);\n        this.state = {\n            counter: 1,\n            position: 0\n        };\n        this.scroller = React.createRef();\n    }\n    render = () =&gt; {\n        return &lt;div className='scroller'\n onScroll={this.onScroll} ref={this.scroller}&gt;&lt;\/div&gt;\n    }\n    componentDidMount = () =&gt; {\n        this.addDivs(5);\n    }\n    onScroll = () =&gt; {\n        if(this.scroller.current.scrollTop &gt; this.state.position){\n            this.addDivs(2);\n        }\n        this.setState({ position: this.scroller.current.scrollTop });\n        \n    }\n    addDivs = (number: any) =&gt; {\n        let cnt = +this.state.counter;\n        for (let i = 1; i &lt;= number; i++) {            \n            let div = document.createElement(\"div\");\n            div.innerText = cnt.toString();\n            div.style.width = \"90%\";\n            div.style.height = \"200px\";\n            div.style.backgroundColor = \"blue\";\n            this.scroller.current.appendChild(div);\n            cnt = +cnt + 1;\n        }\n        this.setState({ counter: cnt });\n    }\n}\nexport default InfiniteScroll;\n\n<\/pre>\n<p>The <code>onScroll<\/code> method adds more <code>div<\/code> tags to the container every time the container is scrolled down further. This creates an infinitely scrolling container. To run the code and see this in action we need to run the below command<\/p>\n<pre class=\"brush: bash;\">&gt;npm run start\n<\/pre>\n<p>Now we can navigate to <code>http:\/\/localhost:3000<\/code> to see the results. Which look like below:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"779\" height=\"515\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/09\/InfiniteScrollOutput.jpg\" alt=\"ReactJS Infinite Scroll - Project Output\" class=\"wp-image-98535\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/09\/InfiniteScrollOutput.jpg 779w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/09\/InfiniteScrollOutput-300x198.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/09\/InfiniteScrollOutput-768x508.jpg 768w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><figcaption>Project Output<\/figcaption><\/figure>\n<\/div>\n<p>This wraps up our look at creating an Infinite Scroll Example using ReactJS.<\/p>\n<h2 class=\"wp-block-heading\">5. Download the Source Code<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/09\/JCG-ReactJS-Infinite-Scroll-Example.zip\"><strong>ReactJS Infinite Scroll Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we implement the Infinite scroll feature in a ReactJS application. This feature allows us to load and present additional content as the user scrolls the container. It creates an impression of seemingly infinite content and thus the name infinite scroll. In this article, we will create a container that, when scrolled would &hellip;<\/p>\n","protected":false},"author":82952,"featured_media":92051,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1903],"tags":[1415],"class_list":["post-97205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ReactJS Infinite Scroll Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Interested to learn more? Check out our example on ReactJS Infinite Scroll, which allows us to load additional content as the user scrolls the container.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ReactJS Infinite Scroll Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more? Check out our example on ReactJS Infinite Scroll, which allows us to load additional content as the user scrolls the container.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-25T04:00:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\"},\"headline\":\"ReactJS Infinite Scroll Example\",\"datePublished\":\"2019-09-25T04:00:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html\"},\"wordCount\":521,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"keywords\":[\"React.js\"],\"articleSection\":[\"React.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html\",\"name\":\"ReactJS Infinite Scroll Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"datePublished\":\"2019-09-25T04:00:14+00:00\",\"description\":\"Interested to learn more? Check out our example on ReactJS Infinite Scroll, which allows us to load additional content as the user scrolls the container.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-infinite-scroll-example.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"React.js\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/react-js\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"ReactJS Infinite Scroll Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/siddharth-seth-240180\\\/\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/siddharth_seth1980\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ReactJS Infinite Scroll Example - Java Code Geeks","description":"Interested to learn more? Check out our example on ReactJS Infinite Scroll, which allows us to load additional content as the user scrolls the container.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html","og_locale":"en_US","og_type":"article","og_title":"ReactJS Infinite Scroll Example - Java Code Geeks","og_description":"Interested to learn more? Check out our example on ReactJS Infinite Scroll, which allows us to load additional content as the user scrolls the container.","og_url":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2019-09-25T04:00:14+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c"},"headline":"ReactJS Infinite Scroll Example","datePublished":"2019-09-25T04:00:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html"},"wordCount":521,"commentCount":2,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","keywords":["React.js"],"articleSection":["React.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html","url":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html","name":"ReactJS Infinite Scroll Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","datePublished":"2019-09-25T04:00:14+00:00","description":"Interested to learn more? Check out our example on ReactJS Infinite Scroll, which allows us to load additional content as the user scrolls the container.","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/reactjs-infinite-scroll-example.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"React.js","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/react-js"},{"@type":"ListItem","position":5,"name":"ReactJS Infinite Scroll Example"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.linkedin.com\/in\/siddharth-seth-240180\/"],"url":"https:\/\/www.javacodegeeks.com\/author\/siddharth_seth1980"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/97205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/82952"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=97205"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/97205\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/92051"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=97205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=97205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=97205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}