@rylovnikita/react-hook-pagination
v1.1.1
Published
React hook usePagination
Downloads
3
Readme
react-hook-pagination
React Hook для использования пагинации Генерация массива для отрисовки, вида: (1) < {4 5} [6] {7 8} > (10)
|первая страница|переход влево|соседи|текущая|соседи|переход вправо|последняя страница| |---------------|-------------|------|-------|------|--------------|------------------| | (1) | < | {4 5}| [6] | {7 8}| > | (10) |
Использование
- @param {number} totalPages количество страниц
- @param {number} currentPage текущая страница
- @param {{}} opts конфигурируемые свойства
- @returns {Array{}}
Конфигурируемые свойства
- @param {number} pageNeighbours количество "соседей"
- @param {function} onPageClick колбэк при возникновении события
- @param {string} onPageClickPropName имя свойства при котором должно возникнуть событие (onClick, onFocus, ...etc)
- @param {string} leftChar символ перехода влево
- @param {string} rightChar символ перехода вправо
Примеры
Без настроек, по умолчанию
import usePagination from '@rylovnikita/react-hook-pagination';
function App(props) {
const pages = usePagination(25, 10); // returns [{children: 1, onClick: () => console.log(1)}, ...]
return <>
{pages.map(pageProps => <button {...pageProps} />)}
</>
}
Переопределение свойств
const pages = usePagination(25, 10, {
pageNeighbours: 5,
onPageClickPropName: 'onFocus',
onPageClick: 'alert',
leftChar: 'back',
rightChar: 'forward'
})