📚 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

1npm install @careerday-jobs/react-paginator

🪄 Basic Usage

1// import at the top of file
2import { PaginatedParam, usePaginated, PaginatedCommander } from '@careerday-jobs/node-paginator';
3
4// In a React component.
5const SampleComponent = () => {
6
7  // 1. Call usePaginated(). Give page size and selectablePageNumberRange.
8  const [paginated, setPaginated, drawPaginated, selectablePageNums] = usePaginated(10, 5);
9
10  // 2. Return <PaginatedCommander /> component
11  return (
12    <>
13      <PaginatedCommander
14        paginated={paginated}
15        setPaginated={setPaginated}
16        selectablePageNums={selectablePageNums}
17        dataFetchFunction={async (page: number) => {
18          const apiResponse = await axios.get('https://myawesomehomepage.com/showitems?page=' + page);
19          const totalItemCount = parseInt(apiResponse.data.totalItemCount);
20
21          // 3. Call drawPaginated() everytime page changes.
22          const paginatedParam = new PaginatedParam(
23            1, // pageNo 
24            10, // pageSize
25            totalItemCount, // totalItemCount
26            5 // selectablePageNumberRange
27          );
28          
29          drawPaginated(paginatedParam);
30        }}
31      />
32    </>
33  );
34}
35

🪄 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.

1/* Example */
2@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!

👨👩 Contributors

@kunhokimcareerday

@starseeder0309

@hyojin961

🔑 License

MIT @ 2022 CareerDay