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.
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()}/>
