reactpagetastic
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

ReactPageTastic

NPM

A simple pagination component for React.

Installation

npm i reactpagetastic

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import ReactPageTastic from 'reactpagetastic';
import "reactpagetastic/dist/pagetastic.css"; // Import the CSS

const [currentPage, setCurrentPage] = React.useState(1);

const App = () => {
  return (
    <div>
      <ReactPageTastic
        totalCount={100}
        pageSize={10}
        currentPage={currentPage}
        onPageChange={(page) => setCurrentPage(page)}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('#root'));

Props

Prop Type Description
onPageChange Function Function to call when page is changed
totalCount Number Total number of items
siblingCount Number Number of siblings to show (optional, default is 1)
currentPage Number Current page
pageSize Number Number of items per page
classNamePrefix String To override all pagination styling (optional, default is empty string)
leftArrow JSX.Element To override left arrow (optional)
rightArrow JSX.Element To override right arrow (optional)

Package Sidebar

Install

npm i reactpagetastic

Weekly Downloads

1

Version

1.0.2

License

ISC

Unpacked Size

38.7 kB

Total Files

8

Last publish

Collaborators

  • izzathaikal