Links

Laravel Pagination with ReactJS

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.",
},
{
id: 2,
name: "Liliana Mayert",
}
],
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:

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

Example:

You can set your own request params for request
params=()=>{
return {
keyword:this.state.keyword
}
}

Credits