or yarn: yarn add prime-pagination

import * as React React from 'react'
import Pagination from 'prime-pagination'
...

onPageChange = (pageNumber: number) => { console.log('Current page is: 'pageNumber) }

React.render(<Pagination totalPages={6} pageChange={this.onPageChange}/>, container)

How to add FontAwesome? Add the following line inside 'head' section of your HTML file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

totalPages: number; // total amount of pages

pageChange: (pageNumber: number) => void; // callback function triggered after page change

displayPages?: number; // number of pages to be displayed in the pagination bar (default is 3)

nextPage?: boolean; // next page button(appears only when there is next page)

previousPage?: boolean; // previous page button(appears only when there is previous page)

firstPage?: boolean; // first page button(appears only when currentPage != 1)

lastPage?: boolean; // last page button(appears only when currentPage != totalPages)

skipForward?: boolean; // skip forward button(skips by 3 pages, appears only when currentPage + 3 != totalPages)

skipBackward?: boolean; // skip backward button(skips by 3 pages, appears only when currentPage - 3 != 1)

style?: any; // pass style object to customize each page button