react-pagination-helper

pagination

React Pagination Component.

Output Preview:

!inq5erdiagram
!inq5erdiagram

How to use

npm i react-pagination-helper

Usage

import {SimplePaginationHelper} from 'react-pagination-helper'

Development use

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: {} }

Example

online example:

https://react-pagination-helper.vercel.app

Code Example

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

``