🌵React Sanity Pagination

React pagination for Sanity.io

Install

npm install --save react-sanity-pagination

Demo

Basic Usage

import React, { useState, useEffect } from "react";
// Import Pagination
import Pagination from "react-sanity-pagination";
// Import Querying tool
import client from "./sanity";

// Create an array outside of your component, this is done so the initial data never changes
const itemsToSend = [];
const Example = () => {
  // Create a variable for the amount of posts you want per page
  const postsPerPage = 3;
  // Create state which will be updated every time you paginate
  const [items, setItems] = useState([]);

  // Fetch all data on load
  useEffect(() => {
    client.fetch('*[_type == "dummyData"] | order(_createdAt) ').then(res => {
      // Push your data to the static array
      itemsToSend.push(...res);
    });
  }, []);

  // Create an action which will be called on paginate
  // This will return the current Page, Range of items and the Items to render
  const action = (page, range, items) => {
    console.log(page, range, items);
    // Update State
    setItems(items);
  };

  return (
    <div className="App">
      <h1>
        React Sanity Pagination Example{" "}
        <span aria-label="🌵" role="img">
          🌵
        </span>
      </h1>
      // Map through your data
      <div className="paginationContent">
        {items.map((item, index) => {
          return <div key={index}>{item.name}</div>;
        })}
      </div>
      // Assign your props // Required props: action, items, postsPerPage
      <Pagination
        items={itemsToSend}
        action={action}
        postsPerPage={postsPerPage}
      />
    </div>
  );
};

export default Example;

Props

| Name | Required | Type | | --------------------------- | -------- | -------------------------------------- | | action | Yes | Function | | postsPerPage | Yes | Number | | postsLength | Yes | Number | | paginationStyle | No | ("default", "activePage", "centerMode) | | nextButton | No | Boolean | | nextButtonLabel | No | String | | prevButton | No | Boolean | | prevButtonLabel | No | String | | jumpStartButton | No | Boolean | | jumpStartButtonLabel | No | String | | jumpEndButton | No | Boolean | | jumpEndButtonLabel | No | String | | jumpFiveForwardButton | No | Boolean | | jumpFiveForwardButtonLabel | No | String | | jumpTenForwardButton | No | Boolean | | jumpTenForwardButtonLabel | No | String | | jumpFiveBackwardButton | No | Boolean | | jumpFiveBackwardButtonLabel | No | String | | jumpTenBackwardButton | No | Boolean | | jumpTenBackwardButtonLabel | No | String | | className | No | String |

Pagination Styles

Default

activePage

centerMode

License

MIT © dane-brown