Pagination

Pagination provides navigation for content separated in pages.

Examples

1 of 6

1 of 15

1 of 8

import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination, PaginationItem, Button, Icon } from 'furl-components';

ReactDOM.render(
  <div>
    <Pagination>
      <Button>First</Button>
      <Button>Previous</Button>
      <PaginationItem>1 of 6</PaginationItem>
      <Button>Next</Button>
      <Button>Last</Button>
    </Pagination>
    <Pagination
      currentPage={1} pageCount={8}
      firstText={(<Icon name='chevrons-left' width={16} height={16} />)}
      previousText={(<Icon name='chevron-left' width={16} height={16} />)}
      nextText={(<Icon name='chevron-right' width={16} height={16} />)}
      lastText={(<Icon name='chevrons-right' width={16} height={16} />)}
    />
  </div>, 
  document.getElementById('root')
);

API

Pagination props
Property	Description	Type	Default
size	pagination size	string	'normal'
shape	pagination shape	string	'normal'
currentPage	pagination current page	string
pageCount	pagination page count	string
firstText	pagination first button text	string/object	'First'
previousText	pagination previous button text	string/object	'Previous'
nextText	pagination next button text	string/object	'Next'
lastText	pagination last button text	string/object	'Last'
onFirst	pagination first button onclick event	function
onPrevious	pagination previous button onclick event	function
onNext	pagination next button onclick event	function
onLast	pagination last button onclick event	function

Notes

You can populate a pagination component either via passing children to it or via the use of the currentPage and pageCount props. If the latter two are provided, they will take precedence over passed children, therefore rendering only the content provided in them.
A Pagination only accepts children of the Button and PaginationItem component types.
size can be one of the following: 'small', 'normal' or 'large' and will override the size property of any of the component’s children.
shape can be either 'normal' or 'rounded' and will override the shape property of any of the component’s children.
firstText, previousText, nextText and lastText accept either a string or an object, which allows you to pass a React component tree.