react-laravel-paginex

    2.0.8 • Public • Published

    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:

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

    params=()=>{
        return {
           keyword:this.state.keyword
        }
    }

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

    Credits

    Install

    npm i react-laravel-paginex

    DownloadsWeekly Downloads

    178

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    42 kB

    Total Files

    7

    Last publish

    Collaborators

    • gharutyunyan
    • karakhanyans