Laravel Pagination with ReactJS (customizable)

Last update: Jun 16, 2022

Laravel Pagination with ReactJS (customizable)

react-laravel-paginex will provide you ability to easily create pagination from Laravel Pagination object.

Installation

npm i react-laravel-paginex

or

yarn add react-laravel-paginex

Usage

First import the Pagination component inside your React component.

import {Pagination} from 'react-laravel-paginex'

Then you'll be able to use pagination component.

Example:

<Pagination changePage={this.getData} data={data}/>

changePage prop will run the function ( in our case is getData()) when new page selected.

getData() function example with axios.
    getData=(data)=>{
        axios.get('getDataEndpoint?page=' + data.page).then(response => {
            this.setState({data:data});
        });
    }

data object must be Laravel default or API Resource Pagination object.

Example:
{
    current_page: 1
    data: [{id: 25600, brand_id: 14, number: "47609-253286", name: "Mall of Africa", type: "Licensed",},]
    first_page_url: "http://example.com/getDataEndpoint?page=1"
    from: 1
    last_page: 10
    last_page_url: "http://example.com/getDataEndpoint?page=10"
    next_page_url: "http://example.com/getDataEndpoint?page=2"
    path: "http://example.com/getDataEndpoint"
    per_page: 20
    prev_page_url: null
    to: 20
    total: 200
}

or

{
    data: [
        {
            id: 1,
            name: "Eladio Schroeder Sr.",
            email: "[email protected]",
        },
        {
            id: 2,
            name: "Liliana Mayert",
            email: "[email protected]",
        }
    ],
    links:{
        first: "http://example.com/pagination?page=1",
        last: "http://example.com/pagination?page=1",
        prev: null,
        next: null
    },
    meta:{
        current_page: 1,
        from: 1,
        last_page: 1,
        path: "http://example.com/pagination",
        per_page: 15,
        to: 10,
        total: 10
    }
}

Customizations

You can customize your pagination styles by overwriting default values.

Available props for component:

Prop Name Default Value
containerClass pagination
buttonIcons false
prevButtonClass page-item
prevButtonText Prev
prevButtonIcon fa fa-chevron-left
nextButtonClass page-item
nextButtonText Next
nextButtonIcon fa fa-chevron-right
numberButtonClass page-item
numberClass page-link
numbersCountForShow 2
activeClass active
Example:

<Pagination changePage={this.getData} data={data} containerClass={"pagination-container"}/>

You can use options prop by passing options object into it.

Example:

You have to define here only props which you want to overwrite.

options:{
    containerClass: "pagination-container",
    prevButtonClass: "prev-button-class",
    nextButtonText: "Next Page"
    ...
}

<Pagination changePage={this.getData} data={data} options={options}/>

Example:

You can set your own request params for request

params=()=>{
    return {
       keyword:this.state.keyword
    }
}

<Pagination changePage={this.getData} data={data} options={options} requestParams={this.params()}/>

Credits

GitHub

https://github.com/lionix-team/react-laravel-paginex
Comments
  • 1. TypeError: Cannot read property 'current_page' of undefined

    TypeError: Cannot read property 'current_page' of undefined at Pagination.generatePagination (app.js:245723) at Pagination.render (app.js:245828) at finishClassComponent (app.js:235690) at updateClassComponent (app.js:235643) at beginWork$1 (app.js:237406) at HTMLUnknownElement.callCallback (app.js:217556) at Object.invokeGuardedCallbackDev (app.js:217605) at invokeGuardedCallback (app.js:217660) at beginWork$$1 (app.js:243000) at performUnitOfWork (app.js:241915)

    Reviewed by abewartech at 2020-02-02 01:20
  • 2. Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-07-18 14:06
  • 3. Update react typescript

    • swap babel for typescript
    • updates perDeps to support react 18
    • fixes typo numbersCountForShow https://github.com/lionix-team/react-laravel-paginex/blob/master/src/Pagination.jsx#L166
    Reviewed by JPrisk at 2022-02-18 01:01
  • 4. Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-11 14:33
  • 5. Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended.

    Using this Pagination Component, I am getting this Warning.

    index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.

    • Move data fetching code or side effects to componentDidUpdate.
    • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps.

    image

    Reviewed by kambojrohit29 at 2021-06-21 10:47
  • 6. Getting error 422

    here's my code, when i refresh i get error 422, i'm trying to use this with search

    import React, { useEffect, useState } from 'react'
    import parse from 'html-react-parser'
    import axios from 'axios'
    import { SEARCH } from '../sevices/globalServices'
    import { Pagination } from 'react-laravel-paginex'
    
    function SearchPage(props) {
    
         const form_data = props.location.state
    
         const [data, setdata] = useState([])
    
    
    
         const getData = (data) => {
    
              axios.post(`${SEARCH()}page?=${data.current_page + 1}`, form_data).then(response => {
                   setdata(response.data);
                   console.log('getDAta', data)
              });
    
         }
    
         useEffect(() => {
    
              const fetchDAta = async () => {
    
                   await axios.post(SEARCH(), form_data).then(response => {
                        setdata(response.data);
                        console.log('data', data)
                   });
              }
    
              fetchDAta()
         }, [data])
    
    
         return (
              <div className='searchPage_container'>
                   <h1> Search Page </h1>
                   <div className="searchPage_grid">
                        {/* {
                             data.length === 0 ?
                                  <p></p>
                                  :
                                  data.data.map(d => <div className="SearchPage_grid_card">
                                       <img className='searchImg' src={d.photo} alt="" />
                                       <div className='searchInfo'>
                                            <h4>{d.title__fr || d.name__fr}</h4>
                                            <p> {parse(`${d.text__fr || d.description__fr}`)} </p>
                                       </div>
                                  </div>)
                        } */}
                   </div>
    
                   <div>
                        <Pagination changePage={getData} data={data} />
                   </div>
    
              </div>
         )
    }
    
    export default SearchPage
    
    
    Reviewed by mimi-uxui-dev at 2021-06-09 08:44
  • 7. Bump browserslist from 4.7.1 to 4.16.6

    Bumps browserslist from 4.7.1 to 4.16.6.

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    4.16.1

    • Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

    4.16

    • Add browserslist config query.

    4.15

    • Add TypeScript types (by Dmitry Semigradsky).

    4.14.7

    • Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
    • Added browser changes to --update-db (by @​AleksandrSl).
    • Added color output to --update-db.
    • Updated package.funding to have link to our Open Collective.

    4.14.6

    • Fixed Yarn support in --update-db (by Ivan Storck).
    • Fixed npm 7 support in --update-db.

    4.14.5

    • Fixed last 2 electron versions query (by Sergey Melyukov).

    4.14.4

    • Fixed Unknown version 59 of op_mob error.

    4.14.3

    • Update Firefox ESR.

    4.14.2

    • Fixed --update-db on Windows (by James Ross).
    • Improved --update-db output.

    4.14.1

    • Added --update-db explanation (by Justin Zelinsky).

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-25 18:18
  • 8. Bump lodash from 4.17.15 to 4.17.21

    Bumps lodash from 4.17.15 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-10 17:47
React.js pagination component based on ultimate-pagination
React.js pagination component based on ultimate-pagination

react-ultimate-pagination React.js pagination component based on ultimate-pagination. It's implemented as a higher-order component that allows easy in

Jun 4, 2022
A ReactJS component that creates a pagination
A ReactJS component that creates a pagination

react-paginate A ReactJS component to render a pagination. By installing this component and writing only a little bit of CSS you can obtain this: or I

Jun 25, 2022
A ReactJS dumb component to render a pagination
A ReactJS dumb component to render a pagination

react-js-pagination A ReactJS dumb component to render a pagination. The component comes with no built-in styles. HTML layout compatible with Bootstra

Apr 22, 2022
Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭
Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭

React Paginating Motivation During development, we were facing problems supporting server-rendering of our web app & SEO (require pagination links). T

Jun 14, 2022
⚛️ React render props component & custom hook for pagination.

Paginated React render props & custom hook for pagination. Features Headless component - There are no restrictions on the ui expression. Style free -

May 22, 2022
A React component to render your pagination navigation

A React component to render your pagination navigation

Dec 12, 2021
React Pagination Utils

React Pagination Utils

May 26, 2022
HTML CSS & React - Pagination component
HTML CSS & React - Pagination component

React component to fetch GitHub followers and showcase certain amount at each page with pagination

May 8, 2022
React components for sorting, filtering and pagination of data.

react-data-components DataTable: Live demo and source SelectableTable: Live demo and source Getting started npm install react-data-components --save T

Apr 8, 2022
Simple pagination for React (MIT)

react-pagify - Simple pagination for React react-pagify provides a simple API for building your own custom paginator. If you want to learn more about

Jun 5, 2022
react pagination component, simple use
react pagination component, simple use

React-pagination Preview: https://killsanghyuck.github.io/react-pagination/ Install npm install react-pagination-component Configuration totalPage :

Mar 18, 2022
React - Pagination Example with logic like Google

react-pagination-example React - Pagination Example with Logic like Google To see a demo and further details go to http://jasonwatmore.com/post/2017/0

Jun 7, 2022
simple library for pagination in react

IMPORTANT NOTE This repository is DEPRECATED. Please use react-pagination-js instead which has more added feature and is tested well. React-pagination

Jan 24, 2020
React Pagination Component.

React Pagination Component.

Jun 18, 2022
React Pagination using Hooks example

React Pagination using Hooks example Set port .env PORT=8081 Project setup In the project directory, you can run: npm install # or yarn install or C

Apr 20, 2022
Generate a sequence of numbers for use in a pagination system, the clever way.
Generate a sequence of numbers for use in a pagination system, the clever way.

JavaScript Pagination Sequence Generator Generate a sequence of numbers for use in a Pagination Component, the clever way. Installation npm i @bramus/

Jun 5, 2022
React Pagination Bar
React Pagination Bar

React Pagination Bar Lightweight component for pagination of application pages on react Features Customizing class names without using style overrides

Jan 26, 2022
Easily hook up your React app to Laravel Sanctum and Laravel Fortify

Introduction React Sanctum package provides an easy way to authenticate your React application with Laravel Sanctum. Easily hook up your React app to

Jun 13, 2022
Sweet Pagination - A ReactJS component to render a pagination
Sweet Pagination - A ReactJS component to render a pagination

Sweet Pagination - A ReactJS component to render a pagination

Jun 10, 2022
React.js pagination component based on ultimate-pagination
React.js pagination component based on ultimate-pagination

react-ultimate-pagination React.js pagination component based on ultimate-pagination. It's implemented as a higher-order component that allows easy in

Jun 4, 2022