react-pagination-helper
v1.0.34
Published
React Pagination.
Downloads
42
Maintainers
Readme
<!-- app file -->
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 (
<div className="App">
<SimplePaginationHelper activePage={active} totalNumber={totalNumber}
perPage={perPage} setPerPage={setPerPage} setActive={setActive}
perPageList={perPageList} paginationStyle={paginationStyle} />
</div>
);
}
export default App;
** ----------For Better Version---------- **
<!-- app file -->
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 (
<div className="App">
<SimplePaginationHelper
activePage={paginationValue.page}
totalNumber={paginationValue?.total}
perPage={paginationValue.per_page}
setPerPage={setPerPage}
setActive={setActive}
perPageList={perPageList}
paginationStyle={paginationStyle} />
</div>
);
}
export default App;