Hi there 👋 I'm Mohammad Hossein 👨‍💻

Next Js expert and FrontEnd Developer

Description Library

Library ■ A very useful and efficient pagination library for React-Spa websites that shows data without refreshing the page

It is very compact and optimized and has only 2 dependencies, both react and react-dom.

Without refreshing the page, the products shown and the URL changes

The way the package works is that first you enter all the data you need and the number of data you want on each page and leave the rest of the work to the package ☻

High personalization capabilities such as color, background, visibility or lack of auxiliary arrows, etc.

One of the most interesting and useful features of this library is that if you have 3 pages for your products، you have 3 boxes for pagination. Let's say your site's route to display products is all-Datas/page/1 If the user manually tries to change 1 to 0 or less or greater than 3, it will automatically be redirected to page 1.

In addition، if you have 1 product page، you won't be shown pagination in the DOM of your project، but the URL logic is if it is all-courses/page/1، although pagination is not shown، but if the user wants to move the number 1 higher or lower، the library itself will redirect the user to page 1، and that's the authority of this library.

NOTE 📝 This library is for React language only.

View of the Library

Usage

• Import the pagination component first.

import Pagination from 'react-pagination-master'

• Then enter these essential items to launch pagination

<Pagination
    arrDatas={allDatas}
    countDataPerPage={3}
    pathName={'/all-courses/page/'}
    onFilterDatas={handleFilterArrDatas}
/>

• format your datas. Of course، using useState is optional you only need to format the information you send must be the object in the array format.

const [allDatas, setAllDatas] = useState([
    {id:1, ...},
    {id:2, ...},
    {id:3, ...},
    {id:4, ...},
])

Example

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

export default function Test() {

    const [allDatas, setAllDatas] = useState([])
    const [filterDataPage, setFilterDataPage] = useState([])

    useEffect(() => {
        fetch(`http://localhost:3000/v1/datas`)
            .then(res => res.json())
            .then(datas => setAllDatas(datas))
    }, [])

    const handleFilterArrDatas = datas => setFilterDataPage(datas)

    return (
        <section>
            <div>
                {
                    filterDataPage.map((datas, index) => (
                        <Course key={index} {...datas} />
                    ))
                }
            </div>

            <div>
                { allDatas.length &&
                    <Pagination
                        arrDatas={allDatas}
                        countDataPerPage={3}
                        pathName={'/all-Datas/page/'}
                        onFilterDatas={handleFilterArrDatas}
                    />
                }
            </div>
        </section>
    )
}

Uses Props The Pagination

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | arrDatas | Array | Required. Array of products or anything else | | countDataPerPage | Number | Required. On each page you want to show multiple items | | pathName | String | Required. The URL that your product is located in. | | onFilterDatas | Function | Required. Returns a function that contains data on that page، such as page 4. | | isArrowsShow | Boolean | Optional. Auxiliary arrows for switching between pages | | separateBox | Boolean | Optional. I mean, with... Spaces between page 1 and 4 | | directionPage | String | Optional. direction pagination rtl or ltr. by default ltr | | bgColor | String | Optional. Background-Color of all boxes. | | bgColorActive | String | Optional. The background color of the box of that active page | | color | String | Optional. Color of all boxes. | | colorActive | String | Optional. Text Color Box of the active page |

Social Network