Skip to content

Files

Failed to load latest commit information.

Latest commit

 Cannot retrieve latest commit at this time.

History

History
 
 

pagination

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
stories
stories
 
 
.size-snapshot.json
.size-snapshot.json
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.build.json
tsconfig.build.json
 
 
yarn.lock
yarn.lock
 
 

README.md

@zendeskgarden/react-pagination npm version

This package includes components relating to pagination in the Garden Design System.

Installation

npm install @zendeskgarden/react-pagination

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

Offset Pagination

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Pagination } from '@zendeskgarden/react-pagination';

initialState = {
  currentPage: 1
};

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Pagination
    totalPages={11}
    currentPage={state.currentPage}
    onChange={currentPage => setState({ currentPage })}
  />
</ThemeProvider>;

Cursor Pagination

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { CursorPagination } from '@zendeskgarden/react-pagination';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <CursorPagination aria-label="Cursor pagination">
    <CursorPagination.First>First</CursorPagination.First>
    <CursorPagination.Previous>Previous</CursorPagination.Previous>
    <CursorPagination.Next>Next</CursorPagination.Next>
    <CursorPagination.Last>Last</CursorPagination.Last>
  </CursorPagination>
</ThemeProvider>;