Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lionix-team/react-laravel-paginex
Laravel Pagination with ReactJS (customizable)
https://github.com/lionix-team/react-laravel-paginex
Last synced: about 1 month ago
JSON representation
Laravel Pagination with ReactJS (customizable)
- Host: GitHub
- URL: https://github.com/lionix-team/react-laravel-paginex
- Owner: lionix-team
- Created: 2019-06-16T13:21:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-03T11:17:53.000Z (2 months ago)
- Last Synced: 2024-10-27T05:44:41.944Z (about 2 months ago)
- Language: JavaScript
- Size: 195 KB
- Stars: 28
- Watchers: 2
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components - react-laravel-paginex - Laravel Pagination with ReactJS (customizable). (UI Components / Paginator)
- awesome-react - react-laravel-paginex - Laravel Pagination with ReactJS (customizable).  (UI Components / Paginator)
- awesome-react-components - react-laravel-paginex - Laravel Pagination with ReactJS (customizable). (UI Components / Paginator)
- awesome-react-components - react-laravel-paginex - Laravel Pagination with ReactJS (customizable). (UI Components / Paginator)
- awesome-react-components - react-laravel-paginex - Laravel Pagination with ReactJS (customizable). (UI Components / Paginator)
- fucking-awesome-react-components - react-laravel-paginex - Laravel Pagination with ReactJS (customizable). (UI Components / Paginator)
README
# Laravel Pagination with ReactJS (customizable)
[](https://www.npmjs.com/package/react-laravel-paginex)
[](https://www.npmjs.com/package/react-laravel-paginex)
---
Check Larafast - Laravel SaaS Starter Kit [Larafast](https://larafast.com)
---
`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.
```react
import {Pagination} from 'react-laravel-paginex'
```
Then you'll be able to use pagination component.
#### Example:
```html
```
`changePage` prop will run the function
( in our case is `getData()`) when new page selected.
##### getData() function example with axios.
```javascript
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:
```javascript
{
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
```javascript
{
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:
``
You can use `options` prop by passing options object into it.
##### Example:
You have to define here only props which you want to overwrite.
```javascript
options:{
containerClass: "pagination-container",
prevButtonClass: "prev-button-class",
nextButtonText: "Next Page"
...
}
```
``
##### Example:
You can set your own request params for request
```javascript
params=()=>{
return {
keyword:this.state.keyword
}
}
```
``
## Credits
- [Garik Harutyunyan](https://github.com/GHarutyunyan)
- [Lionix Team](https://github.com/lionix-team)