Meteor React pagination


Hello! Can someone tell me how create pagination with meteor and react. Read docs, but not understand how it’s work.
Regards, Evgeny.


Are you attempting to use reactive data (publication/subcription) or a meteor method?


I want to use publication/subcription with withTracker. But methods will be ok too.
Ideally i want get Next/Previous buttons. But really don’t know how to do this.


So your publication will look something like this:

Meteor.publish('dataToPaginate', function({ pageSize, page }) {
  check(pageSize, Number);
  check(page, Number);

  const options = {
    limit: pageSize,
    skip: (pageSize * page),
    sort: { ... } // sort is required

  return Collection.find({}, options);

And you’ll probably have a component to select what page you’re on (psuedocode):

class Paginator extends React.Component {
  state = {
    page: 0,
    pageSize: 10,

  render() {
    const { page, pageSize } = this.state;
    return (
      <CollectionDisplay page={page} pageSize={pageSize} />
      <button onClick={() => set page -1}>Back</button>
      <button onClick={() => set page +1}>Next</button>

Then your withTracker component

const CollectionDisplay = ({ isLoading, documents }) => {
  if (isLoading) return 'loading...';
  return => //....

export default withTracker(({ pageSize, page }) => {
  const subscriptionHandle = Meteor.subscribe('dataToPaginate', { pageSize, page });

  return {
    isLoading: !subscriptionHandle.ready(),
    documents: Collection.find({}),

The downside to this is it’s difficult to disable the next button once there are no more documents to fetch… I may have coded myself into a corner here, but hopefully it’s useful. The method way would be similar, and you could also return what the max page it… Hope this helps.


Wow! It’s really helps! Thank you!