Pagination

Paginations communicate the number of elements (images, articles, commentaries, pages…) that can be loaded within a given context.

import React from 'react';
import { Pagination } from 'chic-ui';

const SimplePagination = () => {
  return (
    <Pagination
      pages={7}
      activeBg="white"
      activeColor="black"
      activeHoverColor="black"
      whenNextPage={(page) =>
        alert(`whenNextPage page hit, currently on page ${page}`)
      }
      whenPreviousPage={(page) =>
        alert(`whenPreviousPage page hit, currently on page ${page}`)
      }
      whenPageChange={(page) =>
        alert(`whenPageChange hit, currently on page ${page}`)
      }
    />
  );
};

Add Custom Background

Use customBg prop to customize styling of the pagination.

import React from 'react';
import { Pagination } from 'chic-ui';

const CustomPagination = () => {
  return (
    <Pagination
      customBg={{
        bgColor: 'gray',
        hover: 'black',
        color: 'yellow',
      }}
      pages={4}
      activeBg="white"
      activeColor="black"
      activeHoverColor="black"
      whenNextPage={(page) =>
        alert(`whenNextPage page hit, currently on page ${page}`)
      }
      whenPreviousPage={(page) =>
        alert(`whenPreviousPage page hit, currently on page ${page}`)
      }
      whenPageChange={(page) =>
        alert(`whenPageChange hit, currently on page ${page}`)
      }
    />
  );
};

Start From Zero

Paginations can be started from page number zero using the startCountInZero prop.

import React from 'react';
import { Pagination } from 'chic-ui';

const StartFromZeroPagination = () => {
  return (
    <Pagination
      bgType="success"
      pages={7}
      startCountInZero
      activeBg="white"
      activeColor="black"
      activeHoverColor="black"
      whenNextPage={(page) =>
        alert(`whenNextPage page hit, currently on page ${page}`)
      }
      whenPreviousPage={(page) =>
        alert(`whenPreviousPage page hit, currently on page ${page}`)
      }
      whenPageChange={(page) =>
        alert(`whenPageChange hit, currently on page ${page}`)
      }
    />
  );
};

API

import { Pagination } from 'chic-ui';

Name	Type	Default	Description
bgType	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'primary'	Background color of the Pagination
activeBg (required)	string		Sets background color of the active page
activeColor (required)	string		Sets color of the active page
activeHoverColor (required)	string		Sets hover color of the active page
customBg	❴bgColor: string, hover: string, color: string❵		Sets custom background color
pages (required)	number		Number of Pages. By default count starts from 1
whenNextPage (required)	(page: number) => void		Handles value changes for next page
whenPreviousPage (required)	(page: number) => void		Handles value changes for previous page
whenPageChange (required)	(page: number) => void		Handles value changes for page changes
startCountInZero	boolean	false	Starts count of pages from 0
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component