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:
changePage
prop will run the function
( in our case is getData()
) when new page selected.
getData() function example with axios.
{ axios; }
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: "therese28@example.com" id: 2 name: "Liliana Mayert" email: "evandervort@example.com" 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
{ return keyword:thisstatekeyword }
<Pagination changePage={this.getData} data={data} options={options} requestParams={this.params()}/>