App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
// Build a React.js Frontend Pagination Component With Controls Using react-ultimate-pagination in JSX import React, { useState } from "react"; import { createUltimatePagination } from "react-ultimate-pagination"; 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"; // Custom pagination components function Page({ value, isActive, onClick }) { return ( <button style={{ fontWeight: isActive ? "bold" : "normal", padding: "10px", margin: "5px", }} onClick={onClick} > {value} </button> ); } function Ellipsis({ onClick }) { return <button onClick={onClick}>...</button>; } function FirstPageLink({ onClick }) { return <button onClick={onClick}>First</button>; } function PreviousPageLink({ onClick }) { return <button onClick={onClick}>Previous</button>; } function NextPageLink({ onClick }) { return <button onClick={onClick}>Next</button>; } function LastPageLink({ onClick }) { return <button onClick={onClick}>Last</button>; } function Wrapper({ children }) { return <div style={{ display: "flex", justifyContent: "center" }}>{children}</div>; } // Map item types to components const itemTypeToComponent = { PAGE: Page, ELLIPSIS: Ellipsis, FIRST_PAGE_LINK: FirstPageLink, PREVIOUS_PAGE_LINK: PreviousPageLink, NEXT_PAGE_LINK: NextPageLink, LAST_PAGE_LINK: LastPageLink, }; // Create Ultimate Pagination component const UltimatePagination = createUltimatePagination({ itemTypeToComponent, WrapperComponent: Wrapper, }); const App = () => { const images = [image1, image2, image3, image4, image5, image6]; const imagesPerPage = 2; const totalPages = Math.ceil(images.length / imagesPerPage); const [currentPage, setCurrentPage] = useState(1); // Calculate images for the current page const indexOfLastImage = currentPage * imagesPerPage; const indexOfFirstImage = indexOfLastImage - imagesPerPage; const currentImages = images.slice(indexOfFirstImage, indexOfLastImage); 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 */} <UltimatePagination currentPage={currentPage} totalPages={totalPages} onChange={setCurrentPage} /> </div> ); }; export default App; |
