{"id":28470,"date":"2022-07-13T07:43:09","date_gmt":"2022-07-13T07:43:09","guid":{"rendered":"http:\/\/create-infinite-scroll-images-in-remix."},"modified":"2025-03-02T15:17:41","modified_gmt":"2025-03-02T23:17:41","slug":"create-infinite-scroll-images-in-remix","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/","title":{"rendered":"Create Infinite Scroll Images in Remix"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h2>Introduction<\/h2>\n<p>Building web applications involves displaying text, videos, and images to users. Sometimes, the sheer size of these assets could cause application lag; therefore, there is a need to display these assets in bits to users.<\/p>\n<p>Developers have devised several means of compressing images; one that stands out is using pagination to enhance user experience. The use of an infinite scroll has proven to provide a better user experience.\nBuilding an infinite scroll into projects has gotten even easier with the introduction of the <strong>react-infinite-scroll-component<\/strong>.<\/p>\n<h2>What We Will be Building<\/h2>\n<p>This tutorial will walk us through implementing infinite scroll in an image gallery using the react-infinite-scroll-component with Remix.<\/p>\n<h2>SandBox<\/h2>\n<p>The completed demo for this project is in a <a href=\"https:\/\/codesandbox.io\/s\/remix-infinite-scroll-in1gxb\">CodeSandbox<\/a>. Fork it to run the code.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/remix-infinite-scroll-in1gxb?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"remix-infinite-scroll\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>The source code is available <a href=\"https:\/\/github.com\/Tundesamson26\/remix-infinite-scroll\">here<\/a>.<\/p>\n<h2>What Exactly is Infinite Scroll?<\/h2>\n<p>Infinite scroll is an interactive feature that automatically loads more content as the user scrolls through the page, creating a seemingly endless page.<\/p>\n<p>The interactivity has successfully eliminated the friction of pagination and led to increasing engagement. There is little wonder we would see it on almost all social media platforms and E-commerce websites.<\/p>\n<blockquote>\n<p>\u201cJust a few more shoes to check\u2026.\u201d But you never get to the end of the seemingly endless list of shoes before you doze right off!<\/p>\n<\/blockquote>\n<p>This tutorial will focus on leveraging the <strong>react-infinite-scroll-component<\/strong> to achieve infinite scroll.<\/p>\n<h2>Prerequisites<\/h2>\n<p>This tutorial assumes that we have the following:<\/p>\n<ul>\n<li>Installation of Node.js on our computer<\/li>\n<li>Basic knowledge of JavaScript<\/li>\n<li>Familiarity with Remix<\/li>\n<li>\n<a href=\"https:\/\/pixabay.com\/accounts\/register\/\">Pixabay<\/a> account<\/li>\n<\/ul>\n<h2>Creating a Remix Project<\/h2>\n<p>First, we need to run the command below in the terminal to set up a new Remix application.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npx create-remix@latest remix-infinite-scroll\n<\/code><\/pre>\n<p>The command triggers a CLI where we can configure the application. The images below show the configuration options the CLI provides:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/be930bcbc4b99296a85703a0c2450c90c33087ab-1155x310.png\" alt=\"User-uploaded image: Screenshot_5.png\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1155\" height=\"310\"\/><\/p>\n<p>Next, we navigate into the project directory.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>cd remix-infinite-scroll\n<\/code><\/pre>\n<p>Then, run the command below to start the application.<\/p>\n<pre class=\"js-syntax-highlighted\"><code> npm run dev\n<\/code><\/pre>\n<p>Remix will start a development environment accessible by default at <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n<h2>Installing TailwindCSS<\/h2>\n<p><a href=\"https:\/\/tailwindcss.com\/\">TailwindCSS<\/a> is a utility-first CSS framework with classes to help us style web pages.<\/p>\n<p>We install <code>tailwindcss<\/code> and its peer dependencies via npm, which generates <code>tailwind.config.js<\/code> and <code>postcss.config.js<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n<\/code><\/pre>\n<p>We need to add the paths to our template files in the <code>tailwind.config.js<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\/\/tailwind.config.js\n    module.exports = {\n      content: [\n        &quot;.\/pages\/**\/*.{js,ts,jsx,tsx}&quot;,\n        &quot;.\/components\/**\/*.{js,ts,jsx,tsx}&quot;,\n      ],\n      theme: {\n        extend: {},\n      },\n      plugins: [],\n    }\n<\/code><\/pre>\n<p>We should add the <code>@tailwind<\/code> directives for Tailwind\u2019s layers to our <code>.\/styles\/globals.css<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\/\/globals.css\n    @tailwind base;\n    @tailwind components;\n    @tailwind utilities;\n<\/code><\/pre>\n<h2>Installing react-infinite-scroll<\/h2>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/react-infinite-scroll-component\">React-infinite-scroll-component<\/a> is a component to make all the infinite scrolling woes go away with just 4.15 kB! An infinite scroll that works and is super simple to integrate! The Pull Down to Refresh feature was added to make it more awesome.<\/p>\n<p>To install the <strong>react-infinite-scroll-component<\/strong> in our project, we run the following terminal command.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npm install --save react-infinite-scroll-component\n<\/code><\/pre>\n<h2>Creating the Skeleton UI with Random Images<\/h2>\n<p>Before wading through an endless list of images, we\u2019ll build a skeleton interface to lay the foundation of our gallery.<\/p>\n<p><strong>Creating the Image Component<\/strong><\/p>\n<p>The grid of images across each row shows a photo gallery.\nWe create a <code>component<\/code> folder in the <code>app<\/code> directory, then create an <code>ImageCard.jsx<\/code> file and add the code block below:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>const ImageCard = ({ image }) =&gt; {\n  return (\n      &lt;div className=&quot;max-w-sm rounded overflow-hidden shadow-lg&quot;&gt;\n          &lt;img src={image.webformatURL} alt=&quot;&quot; className=&quot;w-full&quot; \/&gt;\n          &lt;div className=&quot;px-6-py-4&quot;&gt;\n              &lt;div className=&quot;font-bold text-purple-500 text-xl mb-2&quot;&gt;\n                  Photo by Samson\n              &lt;\/div&gt;\n              &lt;ul&gt;\n                  &lt;li&gt;\n                      &lt;strong&gt;Views:&lt;\/strong&gt;\n                      4000\n                  &lt;\/li&gt;\n                  &lt;li&gt;\n                      &lt;strong&gt;Downloads:&lt;\/strong&gt;\n                      5000\n                  &lt;\/li&gt;\n                  &lt;li&gt;\n                      &lt;strong&gt;Likes:&lt;\/strong&gt;\n                      50\n                  &lt;\/li&gt;\n              &lt;\/ul&gt;\n          &lt;\/div&gt;\n      &lt;\/div&gt;\n  )\n}\nexport default ImageCard;\n<\/code><\/pre>\n<p>Proceed to the <code>app\/routes\/index.jsx<\/code> file and import the <code>ImageCard<\/code> component.<\/p>\n<p>At this point, the <code>app\/routes\/index.jsx<\/code> should look like this:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import ImageCard from &quot;..\/component\/ImageCard&quot;;\n\nexport default function Index() {\n  \n  return (\n    &lt;div className=&quot;container mx-auto&quot;&gt;\n        &lt;div className=&quot;grid grid-cols-3 gap-4&quot;&gt;\n          &lt;ImageCard\/&gt;\n        &lt;\/div&gt;\n      &lt;\/InfiniteScroll&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p>Our webpage should then look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/c83d286c4b45efbddbf09afa503b4af8ba004b83-944x587.png\" alt=\"image-component-UI\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"944\" height=\"587\"\/><\/p>\n<h2>Adding Dynamic Images<\/h2>\n<p>After setting up the basic UI skeleton for the page, the next thing to be done is to add dynamic images that populate automatically from an API.\nThis article will be using the <em><a href=\"https:\/\/pixabay.com\/api\/docs\/\">Pixabay API<\/a><\/em>. To use the Pixabay API, we must sign up for an account to generate an API Key.<\/p>\n<p>At the end of this setup, the <code>app\/routes\/index.jsx<\/code> should look like the below:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import { useState, useEffect } from &quot;react&quot;;\nimport ImageCard from &quot;..\/component\/ImageCard&quot;;\n\nexport default function Index() {\n  const [images, setImages] = useState([]);\n\n  useEffect(() =&gt; {\n    fetch(`https:\/\/pixabay.com\/api\/?key={PIXABAY_API_KEY}&amp;q=yellow+flowers&amp;image_type=photo&amp;pretty=true?_limit=10`)\n      .then(res =&gt; res.json())\n      .then(data =&gt; {\n        console.log(data)\n        setImages(data.hits);\n        setIsLoading(false);\n      }).catch(err =&gt; console.log(err));\n  }, [])\n  return (\n    &lt;div className=&quot;container mx-auto&quot;&gt;\n        &lt;div className=&quot;grid grid-cols-3 gap-4&quot;&gt;\n          {images.map(image =&gt; (\n            &lt;ImageCard key={image.id} image={image} \/&gt;\n          ))}\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p>In the <code>app\/routes\/index.jsx<\/code>, we did the following:<\/p>\n<ul>\n<li>Used the <code>useEffect<\/code> Hooks to fetch dynamic images from the Pixabay API in the code above<\/li>\n<li>Set the limit of the image to 10 on the mounts of the app<\/li>\n<li>Loop through the imported image array to render each image<\/li>\n<\/ul>\n<p>Instead of Pixabay, we could use data of images stored locally or retrieved from an API.<\/p>\n<p>By now, our UI should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/2d5b2d21444547f71c573aa8cb22ac864990c092-1345x623.png\" alt=\"dynamic-image-UI\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1345\" height=\"623\"\/><\/p>\n<h2>Implementing the Infinite Scroll<\/h2>\n<p>To create a seemingly endless page with the react-infinite-scroll-component, import the dependency into the <code>app\/routes\/index.jsx<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import InfiniteScroll from 'react-infinite-scroll-component';\n<\/code><\/pre>\n<p>We then need to render the <code>InfiniteScroll<\/code> component to our images like this:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n&lt;InfiniteScroll\n    dataLength={images.length} \/\/This is important field to render the next data\n    next={getMoreImages}\n    hasMore={true}\n    loader={&lt;h4&gt;Loading...&lt;\/h4&gt;}\n    endMessage={\n      &lt;p style={{ textAlign: 'center' }}&gt;\n        &lt;b&gt;Yay! You have seen it all&lt;\/b&gt;\n      &lt;\/p&gt;\n       }\n &gt;\n    &lt;div className=&quot;grid grid-cols-3 gap-4&quot;&gt;\n      {images.map(image =&gt; (\n        &lt;ImageCard key={image.id} image={image} \/&gt;\n       ))}\n    &lt;\/div&gt;\n&lt;\/InfiniteScroll&gt; \n<\/code><\/pre>\n<p>The code snippet above passed the <code>InfiniteScroll<\/code> component with the <code>dataLength<\/code>, <code>next<\/code>, <code>loader<\/code>, and <code>endMessage<\/code> properties.<\/p>\n<p>Next, we need to declare the <code>getMoreImages()<\/code> function that\u2019ll get new images from the Pixabay API while scrolling through the web pages.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>const getMoreImages = async () =&gt; {\n    const response = await fetch(`https:\/\/pixabay.com\/api\/?key={PIXABAY_API_KEY}&amp;q=yellow+flowers&amp;image_type=photo&amp;pretty=true?_start=${images.length}&amp;_limit=10`);\n    const newImages = await response.json();\n    setImages([...images, ...newImages.hits]);\n    setIsLoading(false);\n}\n<\/code><\/pre>\n<p>At this point, more images should automatically load as we navigate through the application in our browser.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/9c069b7bed8b8772099720bffba3167e032f0359-709x324.png\" alt=\"infinite-scroll-application\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"709\" height=\"324\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this post, we learned how to build a photo gallery with infinite scroll implemented using the <strong>react-infinite-scroll component<\/strong> and Pixabay APIs in Remix.<\/p>\n<h2>Resources<\/h2>\n<p>We may find these resources helpful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/remix.run\/docs\/en\/v1\">Remix Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/pixabay.com\/api\/docs\/\">Pixabay Docs<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/react-infinite-scroll-component\">React-infinite-scroll-component<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28471,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,377,371],"class_list":["post-28470","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-resizing","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Infinite Scroll Images in Remix<\/title>\n<meta name=\"description\" content=\"In this post, we discussed how to build a photo gallery with infinite scroll implemented using the **react-infinite-scroll component** and Pixabay APIs in Remix.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Infinite Scroll Images in Remix\" \/>\n<meta property=\"og:description\" content=\"In this post, we discussed how to build a photo gallery with infinite scroll implemented using the **react-infinite-scroll component** and Pixabay APIs in Remix.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-13T07:43:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-02T23:17:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create Infinite Scroll Images in Remix\",\"datePublished\":\"2022-07-13T07:43:09+00:00\",\"dateModified\":\"2025-03-02T23:17:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Resizing\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/\",\"name\":\"Create Infinite Scroll Images in Remix\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA\",\"datePublished\":\"2022-07-13T07:43:09+00:00\",\"dateModified\":\"2025-03-02T23:17:41+00:00\",\"description\":\"In this post, we discussed how to build a photo gallery with infinite scroll implemented using the **react-infinite-scroll component** and Pixabay APIs in Remix.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA\",\"width\":5184,\"height\":3456},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Infinite Scroll Images in Remix\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Infinite Scroll Images in Remix","description":"In this post, we discussed how to build a photo gallery with infinite scroll implemented using the **react-infinite-scroll component** and Pixabay APIs in Remix.","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:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/","og_locale":"en_US","og_type":"article","og_title":"Create Infinite Scroll Images in Remix","og_description":"In this post, we discussed how to build a photo gallery with infinite scroll implemented using the **react-infinite-scroll component** and Pixabay APIs in Remix.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-13T07:43:09+00:00","article_modified_time":"2025-03-02T23:17:41+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/"},"author":{"name":"","@id":""},"headline":"Create Infinite Scroll Images in Remix","datePublished":"2022-07-13T07:43:09+00:00","dateModified":"2025-03-02T23:17:41+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","React","Resizing","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/","name":"Create Infinite Scroll Images in Remix","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA","datePublished":"2022-07-13T07:43:09+00:00","dateModified":"2025-03-02T23:17:41+00:00","description":"In this post, we discussed how to build a photo gallery with infinite scroll implemented using the **react-infinite-scroll component** and Pixabay APIs in Remix.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA","width":5184,"height":3456},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-infinite-scroll-images-in-remix\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Infinite Scroll Images in Remix"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924229\/Web_Assets\/blog\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d\/4577d4ee4f951c8f68a3a31d5fec582ee598e18a-5184x3456-1_2847193d6d.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28470"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28470\/revisions"}],"predecessor-version":[{"id":37100,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28470\/revisions\/37100"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28471"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}