EN
React - simple pagination / pager component
9 points
In this article, we are going to show how to create a simple pagination component using React.
Let's suppose we have few properties that describe the pagination component:
pageNumber- current page number counted from 1 to up (1, 2, 3, ...),pagesCount- total number of pages,radiusSize- maximal number of buttons visible on both sides of the active page button.
Practical example:
xxxxxxxxxx1
// Note: Uncomment import lines during working with JSX Compiler.2
// import React from 'react';3
4
const calculateRange = (pageNumber, pagesCount, radiusSize) => {5
const start = pageNumber - radiusSize;6
if (start < 1) {7
return {8
start: 1,9
stop: Math.min(2 * radiusSize + 1, pagesCount),10
};11
}12
const stop = pageNumber + radiusSize;13
if (stop > pagesCount) {14
return {15
start: Math.max(1, pagesCount - 2 * radiusSize),16
stop: pagesCount,17
};18
}19
return {start, stop};20
};21
22
const pagerStyle = {23
padding: '8px 4px'24
};25
26
const buttonStyle = {27
margin: '2px',28
padding: '5px 10px',29
border: '1px solid',30
borderRadius: '3px',31
textDecoration: 'none',32
fontFamily: 'Arial',33
fontSize: '16px',34
cursor: 'pointer'35
};36
37
const selectedButtonStyle = {38
buttonStyle,39
borderColor: '#007bff',40
backgroundColor: '#007bff',41
color: 'white'42
};43
44
const defaultButtonStyle = {45
buttonStyle,46
borderColor: '#66b0ff',47
backgroundColor: 'white',48
color: '#007bff'49
};50
51
const Button = ({value, selected, children, onClick}) => {52
const buttonStyle = (selected ? selectedButtonStyle : defaultButtonStyle);53
const handleClick = () => {54
if (!selected) {55
onClick(value);56
}57
};58
return (59
<a style={buttonStyle} onClick={handleClick}>{children}</a>60
);61
};62
63
const Pager = ({pageNumber, pagesCount, radiusSize, onPageClick}) => {64
const range = calculateRange(pageNumber, pagesCount, radiusSize);65
const buttons = [];66
for (var i = range.start; i <= range.stop; ++i) {67
buttons.push(68
<Button key={i} value={i} selected={i === pageNumber} onClick={onPageClick}>69
{i}70
</Button>71
);72
}73
return (74
<div style={pagerStyle}>75
<Button76
value={1}77
selected={pageNumber === 1}78
onClick={onPageClick}79
>80
First81
</Button>82
{buttons}83
<Button84
value={pagesCount}85
selected={pageNumber === pagesCount}86
onClick={onPageClick}87
>88
Last89
</Button>90
</div>91
);92
};93
94
95
// Usage example:96
97
const App = () => {98
const [pageNumber, setPageNumber] = React.useState(1);99
const handlePageClick = pageNumber => {100
setPageNumber(pageNumber);101
console.log(`pageNumber=${pageNumber}`);102
};103
return (104
<div>105
<Pager 106
pageNumber={pageNumber}107
pagesCount={10}108
radiusSize={2}109
onPageClick={handlePageClick}110
/>111
</div>112
);113
}114
115
const root = document.querySelector('#root');116
ReactDOM.render(<App />, root);
xxxxxxxxxx1
// Note: Uncomment import lines during working with JSX Compiler.2
// import React from 'react';3
4
const calculateRange = (pageNumber, pagesCount, radiusSize) => {5
const start = pageNumber - radiusSize;6
if (start < 1) {7
return {8
start: 1,9
stop: Math.min(2 * radiusSize + 1, pagesCount),10
};11
}12
const stop = pageNumber + radiusSize;13
if (stop > pagesCount) {14
return {15
start: Math.max(1, pagesCount - 2 * radiusSize),16
stop: pagesCount,17
};18
}19
return {start, stop};20
};21
22
const pagerStyle = {23
padding: '8px 4px'24
};25
26
const buttonStyle = {27
margin: '2px',28
padding: '5px 10px',29
border: '1px solid',30
borderRadius: '3px',31
textDecoration: 'none',32
fontFamily: 'Arial',33
fontSize: '16px',34
cursor: 'pointer'35
};36
37
const selectedButtonStyle = {38
buttonStyle,39
borderColor: '#007bff',40
backgroundColor: '#007bff',41
color: 'white'42
};43
44
const defaultButtonStyle = {45
buttonStyle,46
borderColor: '#66b0ff',47
backgroundColor: 'white',48
color: '#007bff'49
};50
51
const Button = ({value, selected, children, onClick}) => {52
const buttonStyle = (selected ? selectedButtonStyle : defaultButtonStyle);53
const handleClick = () => {54
if (!selected) {55
onClick(value);56
}57
};58
return (59
<a style={buttonStyle} onClick={handleClick}>{children}</a>60
);61
};62
63
const Pager = ({pageNumber, pagesCount, radiusSize, onPageClick}) => {64
const range = calculateRange(pageNumber, pagesCount, radiusSize);65
const buttons = [];66
for (var i = range.start; i <= range.stop; ++i) {67
buttons.push(68
<Button key={i} value={i} selected={i === pageNumber} onClick={onPageClick}>69
{i}70
</Button>71
);72
}73
const handlePrevClick = () => {74
if (pageNumber > 0) {75
onPageClick(pageNumber - 1);76
}77
};78
const handleNextClick = () => {79
if (pageNumber < pagesCount) {80
onPageClick(pageNumber + 1);81
}82
};83
return (84
<div style={pagerStyle}>85
<a style={defaultButtonStyle} onClick={handlePrevClick}><<</a>86
<Button87
value={1}88
selected={pageNumber === 1}89
onClick={onPageClick}90
>91
First92
</Button>93
{buttons}94
<Button95
value={pagesCount}96
selected={pageNumber === pagesCount}97
onClick={onPageClick}98
>99
Last100
</Button>101
<a style={defaultButtonStyle} onClick={handleNextClick}>>></a>102
</div>103
);104
};105
106
107
// Usage example:108
109
const App = () => {110
const [pageNumber, setPageNumber] = React.useState(1);111
const handlePageClick = pageNumber => {112
setPageNumber(pageNumber);113
console.log(`pageNumber=${pageNumber}`);114
};115
return (116
<div>117
<Pager 118
pageNumber={pageNumber}119
pagesCount={10}120
radiusSize={2}121
onPageClick={handlePageClick}122
/>123
</div>124
);125
}126
127
const root = document.querySelector('#root');128
ReactDOM.render(<App />, root);
