make scrollable blog posts more responsive

hooks/useResizeObserver.ts

@@ -0,0 +1,3 @@
+import useResizeObserver from 'use-resize-observer';
+
+export { useResizeObserver };

package.json

@@ -33,7 +33,8 @@
     "styled-components": "^5.3.1",
     "swiper": "7.0.7",
     "url-loader": "^4.1.1",
-    "use-clipboard-copy": "^0.2.0"
+    "use-clipboard-copy": "^0.2.0",
+    "use-resize-observer": "^8.0.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.15.4",

views/HomePage/ScrollableBlogPosts.tsx

@@ -1,10 +1,12 @@
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { A11y } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import ArticleCard from 'components/ArticleCard';
 import Container from 'components/Container';
 import OverTitle from 'components/OverTitle';
 import SectionTitle from 'components/SectionTitle';
+import { useResizeObserver } from 'hooks/useResizeObserver';
 import { SingleArticle } from 'types';
 import { media } from 'utils/media';
 
@@ -13,6 +15,16 @@ interface ScrollableBlogPostsProps {
 }
 
 export default function ScrollableBlogPosts({ posts }: ScrollableBlogPostsProps) {
+  const [hasMounted, setHasMounted] = useState(false);
+  const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
+
+  const oneItemWidth = 350;
+  const noOfItems = width / oneItemWidth;
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
   return (
     <Section>
       <Container>
@@ -22,31 +34,21 @@ export default function ScrollableBlogPosts({ posts }: ScrollableBlogPostsProps)
         </Content>
       </Container>
 
-      <SwiperContainer>
-        <Swiper
-          modules={[A11y]}
-          slidesPerView={3.5}
-          spaceBetween={10}
-          breakpoints={{
-            300: { slidesPerView: 1.1 },
-            400: { slidesPerView: 1.5 },
-            768: { slidesPerView: 2.5 },
-            1024: { slidesPerView: 3 },
-            1300: { slidesPerView: 4, centeredSlides: true },
-            1500: { slidesPerView: 6, centeredSlides: true },
-          }}
-        >
-          {posts.map((singlePost, idx) => (
-            <SwiperSlide className={idx === 0 ? 'first-slide' : undefined} key={singlePost.meta.title}>
-              <ArticleCard
-                title={singlePost.meta.title}
-                description={singlePost.meta.description}
-                imageUrl={singlePost.meta.imageUrl}
-                slug={singlePost.slug}
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
+      <SwiperContainer ref={ref}>
+        {hasMounted && (
+          <Swiper modules={[A11y]} slidesPerView={noOfItems} spaceBetween={10} loop>
+            {posts.map((singlePost, idx) => (
+              <SwiperSlide key={singlePost.meta.title}>
+                <ArticleCard
+                  title={singlePost.meta.title}
+                  description={singlePost.meta.description}
+                  imageUrl={singlePost.meta.imageUrl}
+                  slug={singlePost.slug}
+                />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        )}
       </SwiperContainer>
     </Section>
   );
@@ -74,6 +76,7 @@ const Section = styled.section`
 
 const SwiperContainer = styled(Container)`
   max-width: 250em;
+  height: 46rem;
 
   & > *:first-child {
     margin-top: 4rem;
@@ -83,8 +86,4 @@ const SwiperContainer = styled(Container)`
     max-width: 100%;
     padding: 0;
   }
-
-  .first-slide {
-    margin-left: 2rem;
-  }
 `;

yarn.lock

@@ -1187,6 +1187,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
+"@juggle/resize-observer@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
+  integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
+
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@@ -7049,6 +7054,13 @@ use-clipboard-copy@^0.2.0:
   dependencies:
     clipboard-copy "^3.0.0"
 
+use-resize-observer@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-8.0.0.tgz#69bd80c1ddd94f3758563fe107efb25fed85067a"
+  integrity sha512-n0iKSeiQpJCyaFh5JA0qsVLBIovsF4EIIR1G6XiBwKJN66ZrD4Oj62bjcuTAATPKiSp6an/2UZZxCf/67fk3sQ==
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+
 [email protected]:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"