@careerday-jobs/react-paginator NPM

📚 Why react-paginator?

Every web developer should work on pagination at some point. We were using React.js, and surprised by the fact that there is no single package we'd like to just install and start using. If you're using React and going to work on pagination, then react-paginator is a worth trying.

🖥 Screenshots

Mobile

Desktop

📦 Installation

npm install @careerday-jobs/react-paginator

🪄 Basic Usage

// import at the top of file
import { PaginatedParam, usePaginated, PaginatedCommander } from '@careerday-jobs/node-paginator';

// In a React component.
const SampleComponent = () => {

  // 1. Call usePaginated(). Give page size and selectablePageNumberRange.
  const [paginated, setPaginated, drawPaginated, selectablePageNums] = usePaginated(10, 5);

  // 2. Return <PaginatedCommander /> component
  return (
    <>
      <PaginatedCommander
        paginated={paginated}
        setPaginated={setPaginated}
        selectablePageNums={selectablePageNums}
        dataFetchFunction={async (page: number) => {
          const apiResponse = await axios.get('https://myawesomehomepage.com/showitems?page=' + page);
          const totalItemCount = parseInt(apiResponse.data.totalItemCount);

          // 3. Call drawPaginated() everytime page changes.
          const paginatedParam = new PaginatedParam(
            1, // pageNo 
            10, // pageSize
            totalItemCount, // totalItemCount
            5 // selectablePageNumberRange
          );
          
          drawPaginated(paginatedParam);
        }}
      />
    </>
  );
}

🪄 Parameters

usePaginated()

pageSize number
```
The size of each page.
```

selectablePageNumberRange number

The range of page numbers you can see. 
For example, if selectablePageNumberRange is 5, 
you will see page numbers like 1, 2, 3, 4, 5 when you're on the 1st page.
And you will see 6, 7, 8, 9, 10 when you're on the 7th page.

PaginatedParam

PaginatedParam constructor requires four parameters like below.

pageNo number
```
Current page number.
```
pageSize number
totalItemCount number
```
The number of whole items.
```
selectablePageNumberRange number

PaginatedCommander (React component)

PaginatedCommander component requires four parameters like below.

paginated

paginated variable you got from usePaginated()

setPaginated

setPaginated variable you got from usePaginated()

selectablePageNums

selectablePageNums variable you got from usePaginated()

dataFetchFunction

The callback you want to use to fetch data.
Please note that you should call drawPaginated() function
after data gets prepared.

locale

For now there are only two locales are supported: 'en' and 'ko'.

🖼️ Styling

Styling can be achieved by just importing css file provided. CDN version will be provided in the future.

/* Example */
@import '@careerday-jobs/react-paginator/lib/paginated.css';

⏳ Pagination Library On Backend

Looking for a library which supports pagination on backend? Why don't you check out node-paginator? It's way more efficient when you try both packages!