react-stitches-paginator v0.2.2

react-stitches-paginator

Flexible pagination component for React. Built with Stitches.

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

See Sandbox Demo

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

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

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

Props