PaginationContext

The PaginationContext module provides a React context and provider that isolates pagination state from the broader MarkLogicContext. It consists of two exports:

• PaginationProvider — A context provider that extracts and memoizes pagination values from MarkLogicContext, preventing unnecessary re-renders in child components when unrelated parts of the MarkLogic context change.
• usePaginationContext — A hook that gives any component access to the current pagination state.

The following FastTrack widgets require their ancestor tree to include a PaginationProvider:

• DataGrid
• ResultsConfig
• ResultsCustom
• ResultsSnippet

Example configuration

Wrap your application (or the relevant subtree) in MarkLogicProvider and PaginationProvider:

import { MarkLogicProvider, PaginationProvider } from "ml-fasttrack";

const Root = () => {
  return (
    <MarkLogicProvider
      scheme="http"
      host="localhost"
      port={4000}
      basePath="/api"
    >
      <PaginationProvider>
        <App />
      </PaginationProvider>
    </MarkLogicProvider>
  );
}

To read pagination state in a child component, use the usePaginationContext hook:

import { usePaginationContext } from "ml-fasttrack";

const PaginationControls = () => {
  const { pageStart, pageLength, total, handlePaging } = usePaginationContext();

  const handleNext = () => {
    handlePaging?.({
      skip: (pageStart ?? 1) - 1 + (pageLength ?? 10),
      take: pageLength ?? 10,
    });
  };

  const handlePrev = () => {
    handlePaging?.({
      skip: Math.max(0, (pageStart ?? 1) - 1 - (pageLength ?? 10)),
      take: pageLength ?? 10,
    });
  };

  return (
    <div>
      <p>Showing {pageStart}–{(pageStart ?? 1) + (pageLength ?? 10) - 1} of {total}</p>
      <button onClick={handlePrev}>Previous</button>
      <button onClick={handleNext}>Next</button>
    </div>
  );
}

Code explanation

• PaginationProvider reads pageStart, pageLength, total, and handlePaging from MarkLogicContext and re-exposes them via a dedicated context. Because the value is memoized, child components only re-render when one of those four values changes.
• PaginationProvider must be nested inside MarkLogicProvider. Using it without a parent MarkLogicProvider will result in empty pagination values.
• usePaginationContext returns the current IPaginationContext value. Components using this hook are insulated from changes to the rest of MarkLogicContext.

PaginationProvider API

PaginationProvider accepts children only. All pagination values are derived automatically from MarkLogicContext.

usePaginationContext hook

usePaginationContext() returns an IPaginationContext object with the following fields: