Fixed x-axis scroll ( Scroll Container)

Gaurav-Krishna-Gaali · Aug 16, 2021 · 84500aa · 84500aa
1 parent f7075c6
commit 84500aa
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "movie-trailer": "^2.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-indiana-drag-scroll": "^2.0.1",
     "react-scripts": "4.0.3",
     "react-youtube": "^7.13.1",
     "web-vitals": "^1.1.2"

diff --git a/src/Row.js b/src/Row.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import axios from "./axios";
 import "./Row.css";
+import ScrollContainer from "react-indiana-drag-scroll";
 import YouTube from "react-youtube";
 import movieTrailer from "movie-trailer";
 const base_url = "https://image.tmdb.org/t/p/original/";
@@ -46,7 +47,7 @@ function Row({ title, fetchUrl, isLargeRow }) {
   return (
     <div className="row">
       <h2>{title}</h2>
-      <div className="row__posters">
+      <ScrollContainer className="row__posters">
         {movies.map((movie) => (
           <img
             key={movie.id}
@@ -58,7 +59,7 @@ function Row({ title, fetchUrl, isLargeRow }) {
             alt={movie.name}
           />
         ))}
-      </div>
+      </ScrollContainer>
       {trailerUrl && <YouTube videoId={trailerUrl} opts={opts} />}
     </div>
   );