A quick look

• One of the smallest, most flexible and simplest Pagination packages for the React framework. Full root control in Pagination fully automatically without refreshing the page 👨‍💻

• Can be used in React and TypeScript programs or React and TypeScript integration

• There is no need to install a separate file for typescript and types, everything is here

• Full control of root and URL on every page

• Many features and options to customize Pagination

• Transferring the user from the wrong root to the right root

• A completely optimized and compact package for your website pagination without many additional dependencies

• This package has no dependencies. Only two main dependencies, react and react-dom, which are the basis of the website and should be

• For each page, the data of the same page is received from the server and displayed in the DOM

• Route Protection and transferring the user from the wrong path to the right path

View of the Library

Note Important

This package is provided as ES Module by default. However, if you need to use the UMD version, you can download it from our GitHub repository.

Install

Use npm to install the package:

npm install react-pagination-master

Ready Example Tsx and Jsx

import { useState, useEffect } from 'react'
import Pagination from 'react-pagination-master'

export default function App() {
  
  // (necessary) The initial values ​​must be as below ✍️ ( Jsx | Tsx )
  
  // Jsx
  const [dataPage, setDataPage] = useState([])                        // Your Datas
  const [filterDataPage, setFilterDataPage] = useState([])            // Filter Datas
  const [activePage, setActivePage] = useState(null)                  // Active Page
  const [isLoading, setIsLoading] = useState(null)                    // Status Loading Datas
  
  // Tsx
  const [dataPage, setDataPage] = useState<any[]>([]);                // Your Datas
  const [filterDataPage, setFilterDataPage] = useState<any[]>([]);    // Filter Datas
  const [activePage, setActivePage] = useState<number | null>(null);  // Active Page              
  const [isLoading, setIsLoading] = useState<boolean | null>(null);   // Status Loading Datas      

  useEffect(() => {
    if (activePage) {
      fetch(`https://jsonplaceholder.typicode.com/users/${activePage}`)
        .then(res => res.json())
        .then(data => {
          setDataPage([data])
          /*          [    ]
            If the returned data was only an object, 
            you should put the object in an array, otherwise it is not needed.
          */
        });
    }
  }, [activePage])

  return (
    <section>

      {
        isLoading
          ?
          <p>Loading...</p>
          :
          filterDataPage.map((datas, index) => (
            <p key={index}>{datas.name}</p>
          ))
      }

      <Pagination
        arrDatas={dataPage}
        countItems={10}
        countDataPerPage={1}
        pathName={'/panel/users/'}
        onFilterDatas={({ showDatasInDOM, activePage, isLoading }) => {
          setActivePage(activePage)          // Necessary
          setFilterDataPage(showDatasInDOM) // Necessary
          setIsLoading(isLoading)          // Optional
        }}
      />

    </section>
  )
}

Package Logic Props 👨‍💻

| Parameter | Type | Field Status | Description | | :-------- | :------- | :------ | :-------------------------------- | | arrDatas | Array | Required | Array of products or anything else | | countItems | Number | Required | You must enter the exact number of your items to calculate the number of pages | | countDataPerPage| Number | Required | On each page you want to show multiple items | | pathName | String | Required | The URL that your product is located in. | | activePage | Number | Optional | Selecting the active page as soon as the page is loaded for the user | | textActivePage | String | Optional | New* : An arbitrary word like page to indicate the active page in the URL | | onFilterDatas | Function | Required | The return function contains arguments to handle pages |

╔╚ onFilterDatas ╝╗

onFilterDatas is a return function from the package side that returns 3 arguments and you must extract the same names as below from the input argument

| Parameter | Type | Field Status | Description | | :-------- | :------- | :------ | :-------------------------------- | | showDatasInDOM | Array | Required | An array of objects and data to display in the DOM | | activePage | Number | Required | The page where the user is active | | isLoading | Boolean | Optional | Loading is shown to the user until the data of that page is fully loaded |

For example:

onFilterDatas={({ showDatasInDOM, activePage, isLoading }) => {
    setActivePage(activePage)          // Necessary
    setFilterDataPage(showDatasInDOM) // Necessary
    setIsLoading(isLoading)          // Optional
}}

╔╚ arrDatas ╝╗

example format your datas.

arrDatas = {[
    {id:1, text: "1", ...},
    {id:2, text: "2", ...},
    {id:3, text: "3", ...},
    {id:4, text: "4", ...},
]}

arrDatas is an array and is used to store the data of the active page that the user is on, and after the user goes to the next page, the new data should replace the previous data of the array.

This array should never be placed inside another array, but the data you want in the form of objects should be inside this array.

Be sure to try using an empty array in React's useState hook for initialization

const [dataPage, setDataPage] = useState([])

return (
    <div>
        <Pagination
            arrDatas={dataPage}
        />
    </div>
)

Package Style Props 💎

| Parameter | Type | Field Status | Description | :-------- | :------ | :---------- | :---------------------------- | | isArrowsShow | Boolean | Optional | Show arrow icons to move between pages | | separateBox | Boolean | Optional | Separation of three point boxes | | stickingBoxes | Boolean | Optional | Putting all the boxes together | | directionPage | String | Optional | Setting the direction of pagination. rtl OR ltr | | bgColor | String | Optional | ⚪ ⚫ 🔴 🔵 ... | | bgColorActive | String | Optional | ⚪ ⚫ 🔴 🔵 ... | | color | String | Optional | ⚪ ⚫ 🔴 🔵 ... | | colorActive | String | Optional | ⚪ ⚫ 🔴 🔵 ... |

If you have questions or need more help, check out the official documentation or contact support. Email: [email protected]

Social Network