add dynamic image access key

sheikhfahad67 · Sep 3, 2022 · 1178b2a · 1178b2a
1 parent 7070802
commit 1178b2a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -58,11 +58,12 @@ function App() {
     <div className='App'>
       <Slider
         sliderResource={data}
+        imageKeyToAccess='imageUrl'
         backgroundColor='#333C19'
         dotColor='#735C19'
         arrowsColor='#126C20'
         arrowHoverColor='#64DF18'
-        imageHeight='25vh'
+        imageHeight='50vh'
         size={{ height: 2.5, width: 2.5 }}
       />
     </div>

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "Slider",
     "Multi Images"
   ],
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,7 @@
 .App {
-  width: 50%;
-  height: 5vh;
+  width: 98%;
+  margin: auto;
+
   text-align: center;
 }
 

diff --git a/src/App.js b/src/App.js
@@ -3,29 +3,29 @@ import { Slider } from './lib';
 
 const data = [
   {
-    image:
+    imageUrl:
       'https://images.pexels.com/photos/10161004/pexels-photo-10161004.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
-    description: `Duis sed bibendum libero. Vestibulum ut enim vitae leo finibus condimentum ut sit amet quam. Maecenas eget malesuada sem, id ultrices diam. `,
+    description: `image 1`,
   },
   {
-    image:
+    imageUrl:
       'https://images.pexels.com/photos/10166802/pexels-photo-10166802.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
-    description: `Duis sed bibendum libero. Vestibulum ut enim vitae leo finibus condimentum ut sit amet quam. Maecenas eget malesuada sem, id ultrices diam. `,
+    description: `image 2`,
   },
   {
-    image:
+    imageUrl:
       'https://worlduniversityofdesign.ac.in/assets/images/bgs/school-of-visual-arts-banner.jpg',
-    description: `Duis sed bibendum libero. Vestibulum ut enim vitae leo finibus condimentum ut sit amet quam. Maecenas eget malesuada sem, id ultrices diam. `,
+    description: `image 3`,
   },
   {
-    image:
+    imageUrl:
       'https://images.pexels.com/photos/10166802/pexels-photo-10166802.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
-    description: `Duis sed bibendum libero. Vestibulum ut enim vitae leo finibus condimentum ut sit amet quam. Maecenas eget malesuada sem, id ultrices diam. `,
+    description: `image 4`,
   },
   {
-    image:
+    imageUrl:
       'https://worlduniversityofdesign.ac.in/assets/images/bgs/school-of-visual-arts-banner.jpg',
-    description: `Duis sed bibendum libero. Vestibulum ut enim vitae leo finibus condimentum ut sit amet quam. Maecenas eget malesuada sem, id ultrices diam. `,
+    description: `image 5`,
   },
 ];
 
@@ -34,11 +34,12 @@ function App() {
     <div className='App'>
       <Slider
         sliderResource={data}
+        imageKeyToAccess='imageUrl'
         backgroundColor='#333C19'
         dotColor='#735C19'
         arrowsColor='#126C20'
         arrowHoverColor='#64DF18'
-        imageHeight='25vh'
+        imageHeight='50vh'
         size={{ height: 2.5, width: 2.5 }}
       />
     </div>

diff --git a/src/lib/components/Slider.js b/src/lib/components/Slider.js
@@ -8,6 +8,7 @@ import { ArrowsHandler } from './Arrows_Handler';
 import ImageViewer from 'react-simple-image-viewer';
 
 const Slider = ({
+  imageKeyToAccess,
   sliderResource,
   backgroundColor,
   dotColor,
@@ -23,11 +24,15 @@ const Slider = ({
   const [activeIndex, setActiveIndex] = useState(0);
 
   useEffect(() => {
-    if (sliderResource && Object.keys(sliderResource).length > 0) {
-      const images = sliderResource?.map(image => image?.image);
+    if (
+      sliderResource &&
+      Object.keys(sliderResource).length > 0 &&
+      imageKeyToAccess
+    ) {
+      const images = sliderResource?.map(image => image[imageKeyToAccess]);
       setImageList(images);
     }
-  }, [sliderResource]);
+  }, [sliderResource, imageKeyToAccess]);
 
   const openImageViewer = useCallback(index => {
     setCurrentImage(index);
@@ -65,33 +70,32 @@ const Slider = ({
         onClick={() => openImageViewer(activeIndex)}
         component='div'
         sx={
-          sliderResource
-            ? imageBox(
-                sliderResource[activeIndex]?.image,
-                imageTransition || '',
-                imageHeight || '50vh'
-              )
-            : imageBox(
-                data[activeIndex].image,
-                imageTransition || '',
-                imageHeight || '50vh'
-              )
+          sliderResource &&
+          imageKeyToAccess &&
+          imageBox(
+            sliderResource[activeIndex][imageKeyToAccess],
+            imageTransition || '',
+            imageHeight || '50vh'
+          )
         }
       />
       <Box component='div' sx={descriptionBox(backgroundColor)}>
-        <DescriptionSection
-          sliderResource={sliderResource}
-          activeIndex={activeIndex}
-          dotColor={dotColor}
-        />
-
-        <ArrowsHandler
-          arrowHoverColor={arrowHoverColor}
-          size={size}
-          arrowsColor={arrowsColor}
-          handleNext={handleNext}
-          handlePrevious={handlePrevious}
-        />
+        <Box sx={{ width: '80%' }}>
+          <DescriptionSection
+            sliderResource={sliderResource}
+            activeIndex={activeIndex}
+            dotColor={dotColor}
+          />
+        </Box>
+        <Box sx={{ width: '20%' }}>
+          <ArrowsHandler
+            arrowHoverColor={arrowHoverColor}
+            size={size}
+            arrowsColor={arrowsColor}
+            handleNext={handleNext}
+            handlePrevious={handlePrevious}
+          />
+        </Box>
       </Box>
       {isViewerOpen && (
         <ImageViewer