React Pagination.
npm install react-pagination-helperReact Pagination Component.
npm i react-pagination-helper
import {SimplePaginationHelper} from 'react-pagination-helper'
Props name |
Value type |
Use case |
Example |
| activePage | number | determine the active page | activePage = {1} |
| totalNumber | number | determine the total number of row/card/item | totalNumber = {130} |
| setActive | state function | change the active page value | setActive={setActive} |
| perPage | number | determine the number of row/card/item per page | perPage={10} |
| setPerPage | state function | change the per page item length | setPerPage={setPerPage} |
| perPageList | Array list | a list of per page length. | perPageList=[10,25,50,100] |
| paginationStyle | object | can use it for customize design | paginationStyle={
container: {}, perPageContainer: {}, perPageSelect: {}, paginationContainer: {}, doubleArrowIconDiv: {}, doubleArrow: {}, singleArrowIconDiv: {}, singleArrow: {}, itemContainer: {}, threeDots: {}, item: {}, itemActive: {} } |
online example:
https://react-pagination-helper.vercel.app
javascript
import { useState } from 'react';
import {SimplePaginationHelper} from 'react-pagination-helper'
function App() {
const [active, setActive] = useState(1);
const [perPage, setPerPage] = useState(10);
const perPageList = [10, 25, 50, 100, 200, 300]
const totalNumber = 178;
const paginationStyle = {
container: {},
perPageContainer: {},
perPageSelect: {},
paginationContainer: {},
doubleArrowIconDiv: {},
doubleArrow: {},
singleArrowIconDiv: {},
singleArrow: {},
itemContainer: {},
threeDots: {},
item: {},
itemActive: {
backgroundColor: 'red',
},
}
return (
perPage={perPage} setPerPage={setPerPage} setActive={setActive}
perPageList={perPageList} paginationStyle={paginationStyle} />
);
}
export default App;
`
----------For Better Version----------
`JavaScript
import { useState } from 'react';
import {SimplePaginationHelper} from 'react-pagination-helper'
function App() {
const perPageList = [10, 25, 50, 100, 200, 300]
const [paginationValue, setPaginationValue] = useState({
page: 1,
per_page: perPageList[0],
total: 0,
});
async function setPerPage(perPage) {
setPaginationValue({
...paginationValue,
per_page: perPage,
});
await fetchData(paginationValue.page, perPage);
}
async function setActive(activePage) {
setPaginationValue({
...paginationValue,
page: activePage,
});
await fetchData(activePage, paginationValue.per_page);
}
useEffect(() => {
fetchData(paginationValue.page, paginationValue.per_page);
}, []);
const fetchData = (page, per_page) => {
// this code depends on api response
axios
.get(${serverUrl}/user/list?page=${page}&per_page=${per_page})
.then((res) => {
setCompanyData(res?.data?.data?.user?.data);
setPaginationValue({
page: res?.data?.data?.user?.current_page,
per_page: res?.data?.data?.user?.per_page,
total: res?.data?.data?.user?.total,
});
})
.catch((error) => {
toast.error("Something went wrong");
console.log(error);
});
};
// for change style must me follow and debug user html code in console for inspect
const paginationStyle = {
container: {},
perPageContainer: {},
perPageSelect: {},
paginationContainer: {},
doubleArrowIconDiv: {},
doubleArrow: {},
singleArrowIconDiv: {},
singleArrow: {},
itemContainer: {},
threeDots: {},
item: {},
itemActive: {
backgroundColor: 'red',
},
}
return (
activePage={paginationValue.page}
totalNumber={paginationValue?.total}
perPage={paginationValue.per_page}
setPerPage={setPerPage}
setActive={setActive}
perPageList={perPageList}
paginationStyle={paginationStyle} />
);
}
export default App;
``