react-hot-pagination
react-hot-pagination copied to clipboard
Published
20 hours ago •
smakosh
smakosh
A React component to render your pagination navigation
react-hot-pagination
Example
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Paginate } from 'react-hot-pagination';
const App = () => {
const [current, setCurrent] = React.useState(1);
const handlePagination = (value: number) => setCurrent(value);
return (
<div>
<Paginate
current={current}
handlePagination={handlePagination}
range={2}
total={30}
components={{}}
/>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Getting started
npm i react-hot-pagination
Or
yarn add react-hot-pagination
Props
Paginate
These docs are inspired by react-flex-ready docs
range total current
| Option | Default | Type | Description |
|---|---|---|---|
| range | 2 | {number} | Pages shown before after the current page |
| total | 20 | {number} | Total pages |
| current | 1 | {number} | Current page |
| components | {object} | your Button, Separator, LeftArrow and RightArrow components | |
| handlePagination | {(value: number) => void} | Your custom handle function to update the current page |
Built with
- TSDX
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Contributors
 Elbarae Rguig 💻 📖 |
 DRISSI TOUBBALI Fadel 💻 |
Todo
- [ ] Add more examples
Support
If you love this React component and want to support me, you can do so through my Patreon or GitHub sponsors.
smakosh