@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

1import { useState } from 'react';
2
3import { Paginator } from '@vtaits/react-paginator';
4
5function Example() {
6  const [page, setPage] = useState(1);
7
8  return (
9    <Paginator
10      page={page}
11      pageCount={15}
12      onPageChange={setPage}
13    />
14  );
15}

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.

1import { useState } from 'react';
2
3import { Paginator } from '@vtaits/react-paginator';
4
5const styles = {
6  container: (baseStyle, props) => ({
7    ...baseStyle,
8    backgroundColor: '#EEE',
9    padding: 10,
10  }),
11
12  pageLink: (baseStyle, props) => ({
13    ...baseStyle,
14    borderWidth: 0,
15    marginLeft: 0,
16  }),
17};
18
19function Example() {
20  const [page, setPage] = useState(1);
21
22  return (
23    <Paginator
24      page={page}
25      pageCount={15}
26      onPageChange={setPage}
27      styles={styles}
28    />
29  );
30}

Style keys

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

With custom components

Redefining like in react-select.

1import { useState } from 'react';
2
3import { Paginator } from '@vtaits/react-paginator';
4
5function PageLink({
6  page,
7  isCurrent,
8  rootProps,
9}) {
10  return (
11    <label
12      style={{
13        textAlign: 'center',
14        padding: '0 4px',
15      }}
16    >
17      <div>
18        {page}
19      </div>
20
21      <div>
22        <input
23          type="radio"
24          onChange={() => {
25            rootProps.onPageChange(page);
26          }}
27          checked={isCurrent}
28        />
29      </div>
30    </label>
31  );
32}
33
34const components = {
35  PageLink,
36};
37
38function Example() {
39  const [page, setPage] = useState(1);
40
41  return (
42    <Paginator
43      page={page}
44      pageCount={15}
45      onPageChange={setPage}
46      components={components}
47    />
48  );
49}

Components keys

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