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.

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.

data object must be Laravel Pagination object.

Example:

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.

<Pagination changePage={this.getData} data={data} options={options}/>

Example:

You can set your own request params for request

<Pagination changePage={this.getData} data={data} options={options} requestParams={this.params()}/>

Credits

CEO @ lionix

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store