react-cursor-pagination
Version:
A simple React cursor-based pagination library
9 lines (8 loc) • 880 B
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DEFAULT_PAGINATION_KEY } from './config.js';
import { useCursorPagination } from './useCursorPagination.js';
export function CursorPagination(props) {
const { nextCursor, paginationKey = DEFAULT_PAGINATION_KEY } = props;
const { cursors, addNextCursor, removeLastCursor, removeAllCursors } = useCursorPagination(paginationKey);
return (_jsxs("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' }, children: [_jsx("button", { onClick: removeAllCursors, disabled: cursors.length === 0, children: "First" }), _jsx("button", { onClick: removeLastCursor, disabled: cursors.length === 0, children: "Prev" }), _jsxs("span", { children: [" Page ", cursors.length + 1, " "] }), _jsx("button", { onClick: () => addNextCursor(nextCursor), disabled: !nextCursor, children: "Next" })] }));
}