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: khadem13359@gmail.com

Social Network