Pagination React Component

• Docs
• Playground

Install

npm install --save @idui/react-pagination

yarn add @idui/react-pagination

Advantages

• Versatile and fully customizable pagination
• Custom rendering of all components (page, controls, divider of pageGroups)

See props in Docs

Pagination with page numbers

• Live Example

import React from 'react'
import styled, { css } from 'styled-components';
import { ifProp } from 'styled-tools';
import Pagination from '@idui/react-pagination'

export function CustomPaginationWithPageNumbers(props) {
    const [page, setPage] = useState(1);

    return (
        <Container>
            <Pagination
                currentPage={page}
                onChangePage={setPage}
                pagesCount={10}
                visiblePagesCount={3}
                renderLeftControl={(props) => <Control {...props}>☞</Control>}
                renderRightControl={(props) => <Control {...props}>☞</Control>}
                renderPage={({ number, ...props }) => <Page {...props}>{number}</Page>}
                pageGroupsDivider={<Divider>...</Divider>}
            />
        </Container>
    );
}

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Page = styled.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1.4rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  &:not(:last-child) {
    margin-right: 0.35rem;
  }
  ${ifProp(
    'isActive',
    css`
      color: #ffffff;
      background-color: #0d4c0e;
    `,
    css`
      color: #666666;
      &:hover {
        color: #000000;
      }
    `
)}
`;

const Control = styled.span`
  font-size: 1.4rem;
  cursor: pointer;
  &:first-child {
    margin-right: 1rem;
    transform: scaleY(-1) rotate(-180deg);
  }
  &:last-child {
    margin-left: 1rem;
  }
`;

const Divider = styled.span`
  margin: 0 0.5rem;
`;

Pagination without page numbers (for example for Slider)

• Live Example

import React from 'react'
import styled from 'styled-components';
import { ifProp } from 'styled-tools';
import Pagination from '@idui/react-pagination'

export function CustomPaginationWithPageNumbers(props) {
    const [page, setPage] = useState(1);

    return (
        <Container>
            <Pagination
                currentPage={page}
                onChangePage={setPage}
                pagesCount={5}
                visiblePagesCount={0}
                renderPage={(props) => <Page {...props} />}
            />
        </Container>
    );
}

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Page = styled.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1.4rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  &:not(:last-child) {
    margin-right: 0.35rem;
  }
  background-color: ${ifProp('isActive', '#0d4c0e', '#507350')};
`;

See more details in storybook

License

MIT © [email protected]