A ReactJS component to render a pagination.
By installing this component and writing only a little bit of code you can obtain this:
#####Common Style #####Common Style #####Common Style
Install Sweet Pagination
with npm:
npm i sweetpagination --save
import React, { useState } from "react";
import SweetPagination from "sweetpagination";
function Items() {
const [currentPageData, setCurrentPageData] = useState(new Array(2).fill());
// Example items, to simulate fetching from another resources.
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
return (
<div>
{currentPageData.map((item) => (
<div>
<h3>Item #{item}</h3>
</div>
))}
<SweetPagination
currentPageData={setCurrentPageData}
dataPerPage={10}
getData={items}
navigation={true}
/>
</div>
);
}
Copyright © All rights reserved by Jahidul Islam Zim