Languages
[Edit]
EN

React - simple pagination / pager component

9 points
Created by:
Root-ssh
115270

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.
Simple pager component example in React.
Simple pager component example in React.

Practical example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';

const calculateRange = (pageNumber, pagesCount, radiusSize) => {
    const start = pageNumber - radiusSize;
    if (start < 1) {
        return {
            start: 1,
            stop: Math.min(2 * radiusSize + 1, pagesCount),
        };
    }
    const stop = pageNumber + radiusSize;
    if (stop > pagesCount) {
        return {
            start: Math.max(1, pagesCount - 2 * radiusSize),
            stop: pagesCount,
        };
    }
    return {start, stop};
};

const pagerStyle = {
	padding: '8px 4px'
};

const buttonStyle = {
  	margin: '2px',
	padding: '5px 10px',
  	border: '1px solid',
  	borderRadius: '3px',
  	textDecoration: 'none',
  	fontFamily: 'Arial',
  	fontSize: '16px',
  	cursor: 'pointer'
};

const selectedButtonStyle = {
	...buttonStyle,
  	borderColor: '#007bff',
  	backgroundColor: '#007bff',
  	color: 'white'
};
const defaultButtonStyle = {
	...buttonStyle,
  	borderColor: '#66b0ff',
  	backgroundColor: 'white',
  	color: '#007bff'
};

const Button = ({value, selected, children, onClick}) => {
	const buttonStyle = (selected ? selectedButtonStyle : defaultButtonStyle);
  	const handleClick = () => {
      	if (!selected) {
          	onClick(value);
        }
    };
  	return (
      	<a style={buttonStyle} onClick={handleClick}>{children}</a>
    );
};

const Pager = ({pageNumber, pagesCount, radiusSize, onPageClick}) => {
  	const range = calculateRange(pageNumber, pagesCount, radiusSize);
  	const buttons = [];
    for (var i = range.start; i <= range.stop; ++i) {
      	buttons.push(
          <Button key={i} value={i} selected={i === pageNumber} onClick={onPageClick}>
            {i}
          </Button>
        );
    }
    return (
        <div style={pagerStyle}>
          <Button
              value={1}
              selected={pageNumber === 1}
              onClick={onPageClick}
          >
            First
          </Button>
          {buttons}
          <Button
              value={pagesCount}
              selected={pageNumber === pagesCount}
              onClick={onPageClick}
          >
            Last
          </Button>
        </div>
    );
};

// Usage example:

const App = () => {
  	const [pageNumber, setPageNumber] = React.useState(1);
  	const handlePageClick = pageNumber => {
      	setPageNumber(pageNumber);
      	console.log(`pageNumber=${pageNumber}`);
    };
    return (
        <div>
          <Pager 
              pageNumber={pageNumber}
              pagesCount={10}
              radiusSize={2}
              onPageClick={handlePageClick}
          />
        </div>
    );
}

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

See also

  1. JavaScript - simple pagination / pager component example in Vanilla JS

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join