Laravel Pagination with ReactJS (customizable)

Laravel Pagination with ReactJS (customizable)

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

Photo by BENCE BOROS on Unsplash

GitHub: https://github.com/lionix-team/react-laravel-paginex

NPM: https://www.npmjs.com/package/react-laravel-paginex

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="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 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
}

Customizations

You can customize your pagination styles by overwriting default values. Available props for component:

Prop NameDefault ValuecontainerClasspaginationprevButtonClasspage-itemprevButtonTextPrevnextButtonClasspage-itemnextButtonTextNextnumberButtonClasspage-itemnumberClasspage-linknumbersCountForShow2activeClassactiveExample:

<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

• Garik Harutyunyan
• Lionix Team