demo

add to reactjs :

1
2npm install @abasb75/paginate --save
3

usage example :

1
2
3import Paginate from "@abasb75/paginate";
4
5import { useState } from 'react';
6
7
8function App() {
9
10  const [activePage,setActivePage] = useState(1);
11  const pageRangeDisplayed = 4;
12
13  return (<>
14    <h1>page : {activePage}</h1>
15
16    <Paginate
17      activePage={activePage}
18      lastPage={10}
19      pageRangeDisplayed={pageRangeDisplayed}
20      onChange={setActivePage}
21
22    />
23    
24  </>
25    
26    
27  );
28}
29
30export default App;
31

props :

Properties

Property	PropType	Required	Default	Description
activePage	number		1
lastPage	number		1
pageRangeDisplayed	number		4
onChange	func		()=>{}
listClassName	string		'ab-paginate-list-2857373'
itemClassName	string		'ab-paginate-item-1683646'
nextClassName	string		'ab-paginate-next-1837342'
previousClassName	string		'ab-paginate-prev-5567886'
firstClassName	string		'ab-paginate-first-3873878'
lastClassName	string		'ab-paginate-last-8866568'
disabledFirstClassName	string		'ab-paginate-dfirst-3203808'
disabledLastClassName	string		'ab-paginate-dlast-8843780'
disabledPreviousClassName	string		'ab-paginate-prev-4034800'
disabledNextClassName	string		'ab-paginate-next-1324686'
activeItemClassName	string		'ab-paginate-actv-5623876'
breakClassName	string		'ab-paginate-brek-4343078'
showNextPage	bool		true
showPreviousPage	bool		true
showFirstPage	bool		true
showLastPage	bool		true
nextPageLabel	string		'>'
previousPageLabel	string		'<'
firstPageLabel	string		'<<'
lastPageLabel	string		'>>'
breakLabel	string		'...'
buttonRounded	none normal quarter full		normal
buttonWidth	number		42
buttonHeight	buttonHeight		42