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

• Myself

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.