@vtaits/react-paginator

Simple customizable pagination component for react applications.

Abilities

• Styling and replacing components like in react-select.
• Simple usage in default theme without connecting extra styles. Only css-in-js.

Sandbox examples

• Simple
• Few pages
• Custom styles
• Custom components

Installation

npm install @vtaits/react-paginator styled-components --save

or

yarn add @vtaits/react-paginator styled-components

Usage

import { useState } from 'react';

import { Paginator } from '@vtaits/react-paginator';

function Example() {
  const [page, setPage] = useState(1);

  return (
    <Paginator
      page={page}
      pageCount={15}
      onPageChange={setPage}
    />
  );
}

Props

Name	Type	Description	Default value
page	number	Required. Current page number. Starts from 1.
pageCount	number	Required. The total number of pages.
onPageChange	(nextPage: number) => void	Callback of current page change.
pageRangeDisplayed	number	The range of pages displayed.	5
marginPagesDisplayed	number	The number of pages to display for margins.	2
previousLabel	react node	Label for the previous button.	'prev'
nextLabel	react node	Label for the next button.	'next'
breakLabel	react node	Label for break between buttons.	'...'
hrefBuilder	(page: number) => string	The method is called to generate the href attribute value on tag a of each page element.	undefined
components	Object	Custom components	undefined
styles	Object	Custom styles	{}
payload	generic	Additional prop for custom components and styles	undefined

Styling

With custom styles

Redefining like in react-select.

import { useState } from 'react';

import { Paginator } from '@vtaits/react-paginator';

const styles = {
  container: (baseStyle, props) => ({
    ...baseStyle,
    backgroundColor: '#EEE',
    padding: 10,
  }),

  pageLink: (baseStyle, props) => ({
    ...baseStyle,
    borderWidth: 0,
    marginLeft: 0,
  }),
};

function Example() {
  const [page, setPage] = useState(1);

  return (
    <Paginator
      page={page}
      pageCount={15}
      onPageChange={setPage}
      styles={styles}
    />
  );
}

Style keys

• break
• container
• nextLink
• pageLink
• pageLinkGroup
• pages
• previousLink

With custom components

Redefining like in react-select.

import { useState } from 'react';

import { Paginator } from '@vtaits/react-paginator';

function PageLink({
  page,
  isCurrent,
  rootProps,
}) {
  return (
    <label
      style={{
        textAlign: 'center',
        padding: '0 4px',
      }}
    >
      <div>
        {page}
      </div>

      <div>
        <input
          type="radio"
          onChange={() => {
            rootProps.onPageChange(page);
          }}
          checked={isCurrent}
        />
      </div>
    </label>
  );
}

const components = {
  PageLink,
};

function Example() {
  const [page, setPage] = useState(1);

  return (
    <Paginator
      page={page}
      pageCount={15}
      onPageChange={setPage}
      components={components}
    />
  );
}

Components keys

• Break
• Container
• Link
• NextLink
• PageLink
• PageLinkGroup
• Pages
• PreviousLink