https://github.com/smakosh/react-hot-pagination

A React component to render your pagination navigation
https://github.com/smakosh/react-hot-pagination

pagination react typescript

Last synced: 12 days ago
JSON representation

A React component to render your pagination navigation

• Host: GitHub
• URL: https://github.com/smakosh/react-hot-pagination
• Owner: smakosh
• License: mit
• Created: 2021-05-18T17:27:39.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-20T21:06:54.000Z (over 3 years ago)
• Last Synced: 2024-10-17T16:07:44.021Z (22 days ago)
• Topics: pagination, react, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-hot-pagination
• Size: 514 KB
• Stars: 32
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-hot-pagination

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

[![npm package][npm-badge]][npm]

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square

[npm]: https://www.npmjs.org/package/react-hot-pagination

## Example

```tsx

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 (

    


      

    

  );

};


ReactDOM.render(, document.getElementById('root'));

```

## Getting started

```bash

npm i react-hot-pagination

```

Or

```bash

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](LICENSE.md) file for details

## Contributors

- [Myself](https://smakosh.com)

  

    
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.

[![Support me on Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/smakosh)