ts-react-pagination v0.0.7

ts-react-pagination

A React.ts 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 'ts-react-pagination/styles.css'". else you'll have to style everything using your own classes or style.

why ts-react-pagination

• This package supports Typescript out of the box, so no need for npm install @types/ts-react-pagination.
• Exposes a two hooksusePagination, useServerPagination that take cares of all the boilerplate for handling pagination states all in one line.
• Heavlly tested for all possible edge cases and prone to future error, so releasing a broken version of this package is highlly unlikely.
• Strongly typed using advanced typescript to narrow down your types and avoid passing wrong prop or parameter type, which gives you nice auto-completion.

Installation

Install ts-react-pagination

with npm:

npm install ts-react-pagination

with yarn:

yarn add ts-react-pagination

Usage

• With usePagination Hook:

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

function App() {
  const {
      currentPageNumber, pageItems, numberOfPages 
  } = 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} 
        />
    </div>
  );
}

• With useServerPagination Hook:

  Note: this hook is only used when your Api supports server pagination.

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

function App() {
  const {
    pageItems,
    isLoading,
    currentPageNumber,
  } = useServerPagination<Repo[]>({
    url: 'https://api.github.com/orgs/GSG-G11/repos',
    searchParams: { page: 'page', perPage: 'per_page' },
    itemsPerPage: 5,
    numberOfPages: 12,
  });


  return (
       <div className='App'>
      {isLoading ? (
        <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} 
        />
    </div>
  );
}

• Passing your own custom props:

import { Pagination } from 'ts-react-pagination';
import 'ts-react-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/ts-react-pagination.git
cd ts-react-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