react-pagination-master v3.3.0

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 👨‍💻

╔╚ 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

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 💎

If you have questions or need more help, check out the official documentation or contact support. Email: khadem13359@gmail.com

Social Network