Build a React.js react-js-pagination Example to Implement Pagination With Controls in JSX Bootstrap

App.jsx

// Build a React.js react-js-pagination Example to Implement Pagination With Controls in JSX Bootstrap

import React, { useState } from "react";
import Pagination from "react-js-pagination";
import "bootstrap/dist/css/bootstrap.min.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 [activePage, setActivePage] = useState(1);

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

  // Handle page change
  const handlePageChange = (pageNumber) => {
    console.log(`Active page is ${pageNumber}`);
    setActivePage(pageNumber);
  };

  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
        activePage={activePage}
        itemsCountPerPage={imagesPerPage}
        totalItemsCount={images.length}
        pageRangeDisplayed={5}
        onChange={handlePageChange}
        itemClass="page-item"
        linkClass="page-link"
      />
    </div>
  );
};

export default App;

// Build a React.js react-js-pagination Example to Implement Pagination With Controls in JSX Bootstrap

import React, { useState } from "react";

import Pagination from "react-js-pagination";

import "bootstrap/dist/css/bootstrap.min.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 [activePage, setActivePage] = useState(1);

// Calculate the images to display for the current page

const indexOfLastImage = activePage * imagesPerPage;

const indexOfFirstImage = indexOfLastImage - imagesPerPage;

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

// Handle page change

const handlePageChange = (pageNumber) => {

console.log(`Active page is ${pageNumber}`);

setActivePage(pageNumber);

};

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

activePage={activePage}

itemsCountPerPage={imagesPerPage}

totalItemsCount={images.length}

pageRangeDisplayed={5}

onChange={handlePageChange}

itemClass="page-item"

linkClass="page-link"

</div>

);

};

export default App;

Build a React.js react-js-pagination Example to Implement Pagination With Controls in JSX Bootstrap

Comments

Leave a Reply Cancel reply

Archives