React-Laravel Pagination

React-Laravel Pagination is a very simple pagination package for react components. This package is based on the Laravel pagination collection and bootstrap UI. This package helps to make pagination simple and efficient for React apps with a Laravel API.

Installation

To install this package, simply run the following command with npm:

$ npm install react-laravel-pagination

Usage

Simply include the mandatory data and onChangeHandler props. Optional props further customize the pagination experience.

import { Pagination } from "react-laravel-pagination";

function App() {
  return  <Pagination data={yourData} onChangeHandler={yourOnChangeHandler} />
}

export default App;

Example Code

Example code are provided below

import { Pagination } from "react-laravel-pagination";
import { useEffect, useState } from "react";

function App() {
  const [users, setUsers] = useState();
  useEffect(() => {
    getUser();
  }, []);

  const getUser = (page = 1) => {
    const url = "you-url?page=" + page;
    fetch(url)
      .then((x) => x.text())
      .then((y) => {
        setUsers(JSON.parse(y));
      });
  };
  return (
    <div>
      {(users && Object.keys(users).length > 0 )&& (
        <Pagination data={users} onChangeHandler={getUser} />
      )}
    </div>
  );
}

export default App;

Props for Pagination Component

Customize your pagination experience by utilizing a range of props that suit your requirements and enhance functionality.

| Prop Name | Type | Description | Default/Required | |------------------------|-------------------------|-------------------------------------------------------|------------------------------------------| | data | object | Object containing pagination data properties. | required | | data.from | string or number | The starting item number of the current page. | required | | data.to | string or number | The ending item number of the current page. | required | | data.total | string or number | The total number of items. | required | | data.links | array | Array of links for pagination. | required | | onChangeHandler | func | Handler function for page change. | required | | previousBtnText | string or element | Text or element for the previous button. | < | | nextBtnText | string or element | Text or element for the next button. | > |
| showingCount | bool | Whether to display the item count. | true | | activePage | number | Active|Current page number. | 1 or url page query string value | | paginationClass | string | CSS class for the pagination container. | "pagination flex-wrap gap-2 gap-md-0" | | paginateItemClass | string | CSS class for each pagination item. | "page-item" | | paginateLinkClass | string | CSS class for pagination links. | "page-link cursor-pointer" | | pageNumberAppendToUrl | bool | Whether to append the page number to the URL. | true |

use usePaginationParams Hook

A React hook for managing page numbers from URL query parameters. It maintains the page number in the URL across reloads and facilitates fetching data from a server based on the specified page number.

import { usePaginationParams } from "react-laravel-pagination";

function App() {
  const { pageNumber } = usePaginationParams();
  useEffect(() => {
    getUser();
  }, []);

  const getUser = (page = pageNumber) => {
    const url = "you-url?page=" + page;
    fetch(url)
      .then((x) => x.text())
      .then((y) => {
        setUsers(JSON.parse(y));
      });
  };
  return (
    <div>
      {(users && Object.keys(users).length > 0 )&& (
        <Pagination data={users} onChangeHandler={getUser} />
      )}
    </div>
  );
}

export default App;

Demo

Here is a screenshot demonstrating the final or result of using pagination package.

License

React-Laravel Pagination is created by Fahim Muntasir . Released under the MIT license.