README

react-stitches-paginator

Flexible pagination component for React. Built with Stitches.

Easy styling using CSS-in-JS or custom components.

Installation

Install the package:

npm install react-stitches-paginator

# or

yarn add react-stitches-paginator

Usage

Inline Styles

Very easy. Style using baseCss and itemCss props.

import React from 'react'
import { Pagination } from 'react-stitches-paginator'

export const UsingInlineStyles = () => {
  const [page, setPage] = React.useState(1)

  return (
    <Pagination
      totalPages={20}
      currentPage={page}
      onPageChange={setPage}
      baseCss={{ display: 'flex', gap: '10px' }}
      itemCss={{
        color: '#474d66',
        fontWeight: '500',
        fontSize: '14px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '6px 12px',
        borderRadius: '6px',
        transition: 'all 400ms',
        // Hover state
        '&:hover': {
          background: '#F4F5F9',
        },
        // Focused state
        '&:focus': {
          boxShadow: '0 0 0 2px #d6e0ff',
        },
        // Disabled state
        '&:disabled': {
          opacity: '0.4',
        },
        // Active state
        '&[aria-current="true"]': {
          color: '#5C85FF',
          background: '#EBF0FF',
        },
      }}
    />
  )
}

Result Inline Styles Pagination

Custom Component

The best part. No need to write styles from scratch. You can use [already themed] components from your UI library.

Here's an example using Chakra UI HStack and Button components:

import React from 'react'
import { Pagination, PaginationItemProps } from 'react-stitches-paginator'
import { Button, HStack } from '@chakra-ui/react'

/**
 * Create a custom pagination item component.
 * For this example we're using a Chakra UI Button.
 * 
 * @param {boolean} props.isActive
 * @param {boolean} props.isDisabled
 * @param {function} props.onClick
 */
const CustomPaginationItem = (props: PaginationItemProps) => {
  return (
    <Button
      size="sm"
      colorScheme={props.isActive ? 'green' : 'gray'}
      isDisabled={props.isDisabled}
      onClick={props.onClick}
    >
      {props.children}
    </Button>
  )
}

export const UsingCustomComponent = () => {
  const [page, setPage] = React.useState<number>(1)

  return (
    <Pagination
      as={HStack}
      spacing="10px"
      totalPages={20}
      currentPage={page}
      onPageChange={setPage}
      // Use the custom item component
      itemComponent={CustomPaginationItem}
    />
  )
}

Result Chakra UI Pagination

Pagination Labels

Use the labels prop to change the content of the pagination items

<Pagination
  totalPages={20}
  currentPage={page}
  onPageChange={setPage}
  labels={{
    previous: 'Prev',
    next: 'Next',
    first: false,
    last: false,
    page: (page) => `P${page}`
  }}
/>

Result Pagination Labels

Props

Name	Description
currentPage	The current page that the user is on - defaults to 1
totalPages	The total number of pages to render
onPageChange	Callback handler when a page is clicked
baseCss	Inline css style object for parent component
itemCss	Inline css style object for pagination item component
labels	Pagination item labels
itemComponent	Custom component for pagination item

Usage no npm install needed!