Build a React.js Pagination Component to Paginate Images With Controls Using sweetpagination Library

App.jsx

// Build a React.js Pagination Component to Paginate Images With Controls Using sweetpagination Library in JSX

import React, { useState } from "react";
import SweetPagination from "sweetpagination";
import image1 from "./assets/1.jpeg";
import image2 from "./assets/2.jpeg";
import image3 from "./assets/3.jpeg";
import image4 from "./assets/4.jpeg";
import image5 from "./assets/5.jpeg";
import image6 from "./assets/6.jpeg";

function ImagePagination() {
  const [currentPageData, setCurrentPageData] = useState([]);

  // Array of images imported from the assets folder
  const images = [image1, image2, image3, image4, image5, image6];

  return (
    <div style={{ textAlign: "center", padding: "20px" }}>
      <h1>Image Pagination</h1>
      <div style={{ display: "flex", justifyContent: "center", gap: "10px", flexWrap: "wrap" }}>
        {currentPageData.map((image, index) => (
          <img
            key={index}
            src={image}
            alt={`Image ${index + 1}`}
            style={{ width: "200px", height: "150px", borderRadius: "8px" }}
          />
        ))}
      </div>

      {/* SweetPagination Component */}
      <SweetPagination
        currentPageData={setCurrentPageData}
        getData={images}
        dataPerPage={2} // Display 2 images per page
        navigation={true} // Enable navigation
      />
    </div>
  );
}

export default ImagePagination;

// Build a React.js Pagination Component to Paginate Images With Controls Using sweetpagination Library in JSX

import React, { useState } from "react";

import SweetPagination from "sweetpagination";

import image1 from "./assets/1.jpeg";

import image2 from "./assets/2.jpeg";

import image3 from "./assets/3.jpeg";

import image4 from "./assets/4.jpeg";

import image5 from "./assets/5.jpeg";

import image6 from "./assets/6.jpeg";

function ImagePagination() {

const [currentPageData, setCurrentPageData] = useState([]);

// Array of images imported from the assets folder

const images = [image1, image2, image3, image4, image5, image6];

return (

<h1>Image Pagination</h1>

{currentPageData.map((image, index) => (

<img

key={index}

src={image}

alt={`Image ${index + 1}`}

style={{ width: "200px", height: "150px", borderRadius: "8px" }}

))}

</div>

{/* SweetPagination Component */}

<SweetPagination

currentPageData={setCurrentPageData}

getData={images}

dataPerPage={2} // Display 2 images per page

navigation={true} // Enable navigation

</div>

);

}

export default ImagePagination;

Build a React.js Pagination Component to Paginate Images With Controls Using sweetpagination Library

Comments

Leave a Reply Cancel reply

Archives