react-ts-pagination v0.2.6

react-ts-pagination

A React Component to render pagination in a simple and Declarative way.

By installing the package you'll have this default pagination look, but you can easilly overwrite it using your own classes and styles.

Note: if you want to have the default styles, you must import the styles file "import 'react-ts-pagination/styles.css'", else you'll have to style everything using your own classes or style.

why react-ts-pagination

• Supports Typescript out of the box, so you can forget aboutnpm install @types/react-ts-pagination .
• Supports client-side pagination using usePagination hook.
• Supports server-side pagination using useServerPagination hook.
• Heavily tested using unit tests for all possible edge cases and is immune to future errors, so releasing a broken version of this package is highly unlikely.
• highly flexible with the right amount of abstraction so you can use the package without the hooks and provide your own props and styles.
• Strongly typed using advanced typescript to narrow down your types and avoid passing the wrong prop or parameter type, which gives you nice auto-completion.

Installation

Install react-ts-pagination

with npm:

npm install react-ts-pagination

with yarn:

yarn add react-ts-pagination

Usage

• With usePagination Hook:

import { Pagination, usePagination } from 'react-ts-pagination';
import 'react-ts-pagination/styles.css';

function App() {
  const { currentPageNumber, pageItems, numberOfPages, handlePageChange } = usePagination({
    items,
    itemsPerPage: 8,
  });

  return (
    <div className='App'>
      <Table>
        {pageItems.map((page) => (
          <tr key={page.id}>
            <td>{page.id}</td>
            <td>{page.first_name}</td>
            <td>{page.last_name}</td>
            <td>{page.email}</td>
            <td>{page.phone}</td>
          </tr>
        ))}
      </Table>

      <Pagination
        currentPageNumber={currentPageNumber}
        numberOfPages={numberOfPages}
        onPageChange={handlePageChange}
      />
    </div>
  );
}

• With useServerPagination Hook:

  Note: because this hook uses react query under the hood you must wrap you component with the provider to use this hook.

import { Pagination, useServerPagination, Provider } from 'react-ts-pagination';
import 'react-ts-pagination/styles.css';

function App() {

 const fetchData = async (page: number) => {
    const data = await (await fetch(`https://api.github.com/orgs/GSG-G11/repos?page=${page}&per_page=10`)).json();
    return data;
  };

  const { pageItems, isFetching, currentPageNumber, handlePageChange } = useServerPagination<Repo[]>({
    queryFunction: fetchData,
  });

  return (
       <div className='App'>
      {isFetching ? (
        <Skeleton />
      ) : (
        <Table tableHeaders={tableHeaders}>
          {pageItems?.map(({ id, name, description, owner, visibility }) => (
            <tr key={id}>
              <td>{id}</td>
              <td>{name}</td>
              <td>{owner.login}</td>
              <td>{description?.slice(0, 20)}</td>
              <td>{visibility}</td>
            </tr>
          ))}
        </Table>
      )}

      <Pagination
          currentPageNumber={currentPageNumber}
          numberOfPages={numberOfPages}
          onPageChange={handlePageChange}
        />
    </div>
  );
}

export default () => (
  <Provider>
    <App />
  </Provider>
);

• Passing your own custom props:

import { Pagination } from 'react-ts-pagination';
import 'react-ts-pagination/styles.css';

const ITEMS_PER_PAGE = 10;
const numberOfPages = Math.ceil(items.length / ITEMS_PER_PAGE);

function App() {
  const [pageItems, setPageItems] = useState<typeof items>[];
  const currentPageNumber = useRef(1);

  const handlePageChange = (pageNumber: number, pageRef: HTMLSpanElement | undefined) => {
    const FIRST_PAGE_NUMBER = 1;
    const LAST_PAGE_NUMBER = numberOfPages;

    const isFirstPage = pageNumber + 1 === FIRST_PAGE_NUMBER;
    const isLastPage = pageNumber - 1 === LAST_PAGE_NUMBER;

    if (isLastPage || isFirstPage) return;

    const start = (pageNumber - 1) * ITEMS_PER_PAGE;
    const end = pageNumber * ITEMS_PER_PAGE;

    currentPageNumber.current = pageNumber;
    setPageItems(items.slice(start, end));
  };

  useEffect(() => {
    const start = (currentPageNumber.current - 1) * ITEMS_PER_PAGE;
    const end = currentPageNumber.current * ITEMS_PER_PAGE;
    setPageItems(items.slice(start, end));
  }, []);

  return (
    <div className='App'>
      <Table>
        {pageItems.map((page) => (
          <tr key={page.id}>
            <td>{page.id}</td>
            <td>{page.first_name}</td>
            <td>{page.last_name}</td>
            <td>{page.email}</td>
            <td>{page.phone}</td>
          </tr>
        ))}
      </Table>

      <Pagination
        currentPageNumber={currentPageNumber.current}
        numberOfPages={numberOfPages}
        onPageChange={handlePageChange}
      />
    </div>
  );
}

How to use?

usePagination hook:

Parameters: a single object Parameter with these props:

Returns: an Object with these props:

useServerPagination hook:

Parameters: a single object Parameter with these props:

Returns: an Object with these props:

Pagination Component:

Props:

Demo

To run the demo locally, clone the repository and move into it:

git clone git@github.com:amjed-98/react-ts-pagination.git
cd react-ts-pagination

Install dependencies:

npm install | yarn

preview the Demo

npm run demo | yarn demo

Open your browser and go to http://127.0.0.1:5173/src/demo/index.html

Run the tests

npm run test | yarn test

Run the tests in the browser with nice UI presentation

npm run test:ui | yarn test:ui