Pagination in React Thoughts

Check out the pagination I created and designed!

When developing a pagination component within a tech company there’s a few things to think about:

1. Can I build my own pagination component?
2. Is there already a reusable component for pagination?
3. Can I change any of the props within the pagination?

Some of the things I heavily considered when building pagination include:

Total Items

• Setting the logic to calculate page numbers and page sizes

Page sizes (10, 20, 50, 100, Show All.) to display number of items per index

• Defining enums for page sizes

 SIZES = [

ALL: infinity;

10: XS,

20: SM,

50: MD,

100: LG,

];

•  Defining default size based on total items

totalItems = [

1: XS, ALL,

51: XS, SM,

101: XS, SM, MD,

201 : SM, MD, LG,

];

• Depending on number of totalItems, the options for page sizes would render into the Items Per Page select component

Items Per Page select component

• Options for page sizes within a select container (e.g., XS, SM, MD)

Page Number select component

• Logic for calculating page numbers
• totalItems/currentPageSize

Setting up useState

[currentPageSize, setCurrentPageSize]

• Allows pageSize to be updated if another option is selected to recalculate number of pages

[currentPageSelection, setCurrentPageSelection]

• Allows page to change to desired index and render its data

Chevron icons for previous and next

• onClick would handle changing pages (index)
• Logic for disable previous chevron if at 0 index
• Logic for disable next chevron if at last index
• Logic to disable both chevrons if Show All is selected

Display “of items”

• Depending on currentPageSize and currentPageSelection, the number of items (e.g., 1-10) in that index would display “of” totalItems

Localizations

Allow developers change text language depending on who they’re building for

Define variables for the following:

• itemsPerPageText
• ofText
• itemsText
• pagesText