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

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.