How it looks

https://i.imgur.com/aPCyBeo.jpg

Example usage

import React, { Component } from 'react';
import Pagination from 'office-ui-fabric-react-pagination';

class App extends Component {
  render() {
    return (
		<Pagination
            currentPage={1}
            totalPages={10}
            onChange={(page) => {alert('Send user to page: ' + page)}}
		/>
    );
  }
}

export default App;

Example usage with fabric icons

If you're missing the chevron icons you need to install the '@uifabric/icons' npm package, and call initializeIcons(). Eg.:

import React, { Component } from 'react';
import { initializeIcons } from '@uifabric/icons';
import Pagination from 'office-ui-fabric-react-pagination';
initializeIcons();

class App extends Component {
  render() {
    return (
		<Pagination
            currentPage={1}
            totalPages={10}
            onChange={(page) => {alert('Send user to page: ' + page)}}
		/>
    );
  }
}

export default App;

Pagination component has the following interface: (copied from react-ultimate-pagination)

• currentPage: number - current page number
• totalPages: number - total number of pages
• boundaryPagesRange: number, optional, default: 1 - number of always visible pages at the beginning and end
• siblingPagesRange: number, optional, default: 1 - number of always visible pages before and after the current one
• hideEllipsis: bool, optional, default: false - boolean flag to hide ellipsis
• hidePreviousAndNextPageLinks: bool, optional, default: false - boolean flag to hide previous and next page links
• hideFirstAndLastPageLinks: bool, optional, default: false - boolean flag to hide first and last page links
• onChange: function - callback that will be called with new page when it should be changed by user interaction (optional)