Build a React.js Pagination Data Component in JSX Using react-pagination library in Browser

App.jsx

// Build a React.js Pagination Data Component in JSX Using react-pagination-library in Browser

import React, { useState } from "react";
import Pagination from "react-pagination-library";
import "react-pagination-library/build/css/index.css"; // for css
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";

const App = () => {
  // List of images
  const images = [image1, image2, image3, image4, image5, image6];
  const imagesPerPage = 2;

  // State for current page
  const [currentPage, setCurrentPage] = useState(1);

  // Calculate the images to display for the current page
  const indexOfLastImage = currentPage * imagesPerPage;
  const indexOfFirstImage = indexOfLastImage - imagesPerPage;
  const currentImages = images.slice(indexOfFirstImage, indexOfLastImage);

  // Handle page change
  const changeCurrentPage = (numPage) => {
    setCurrentPage(numPage);
  };

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

      {/* Pagination Component */}
      <Pagination
        currentPage={currentPage}
        totalPages={Math.ceil(images.length / imagesPerPage)}
        changeCurrentPage={changeCurrentPage}
        theme="bottom-border"
      />

      <h2>Current Page: {currentPage}</h2>
    </div>
  );
};

export default App;

// Build a React.js Pagination Data Component in JSX Using react-pagination-library in Browser

import React, { useState } from "react";

import Pagination from "react-pagination-library";

import "react-pagination-library/build/css/index.css"; // for css

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";

const App = () => {

// List of images

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

const imagesPerPage = 2;

// State for current page

const [currentPage, setCurrentPage] = useState(1);

// Calculate the images to display for the current page

const indexOfLastImage = currentPage * imagesPerPage;

const indexOfFirstImage = indexOfLastImage - imagesPerPage;

const currentImages = images.slice(indexOfFirstImage, indexOfLastImage);

// Handle page change

const changeCurrentPage = (numPage) => {

setCurrentPage(numPage);

};

return (

<h1>Image Pagination Example</h1>

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

<img

key={index}

src={image}

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

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

))}

</div>

{/* Pagination Component */}

<Pagination

currentPage={currentPage}

totalPages={Math.ceil(images.length / imagesPerPage)}

changeCurrentPage={changeCurrentPage}

theme="bottom-border"

<h2>Current Page: {currentPage}</h2>

</div>

);

};

export default App;

Build a React.js Pagination Data Component in JSX Using react-pagination library in Browser

Comments

Leave a Reply Cancel reply

Archives