Props Reference

Common Props

PropDescription
current
number
(required)

The current active page. Indexed from 1

total
number
(required)

The total number of pages

onPageChange
(newPage: number) => void
(required)

A callback handler which is called when the user clicks a new page. The newPage parameter is indexed from 1

Note that the active page will not change unless the current prop is updated to reflect the new page (as in the example above)

maxWidth
number
(optional)

The maximum width (in pixels) of the pagination component. Use this prop if you want to override the automatic sizing. Note the width may be exceeded if it's not possible a component to the specified width

ClassName Props

See Overriding default classNames for more information

PropDescription
className
string
(optional)

Class name for the top level <ul> container

Defaults to pagination, overrides extraClassName prop (below)

extraClassName
string
(optional)

Useful when using Bootstrap styles, extra classNames to be added to the top level <ul> container. Use this prop to override the default justify value - for example to align elements to the start of the page use: justify-content-start

Defaults to justify-content-center, not applicable if className prop is set

pageItemClassName
string
(optional)

Class name for all the <li> elements

Defaults to page-item

pageLinkClassName
string
(optional)

Class name for <a> or <span> child elements within an <li> element:

<li ...><a class='page-link'>1</a></li>

Defaults to page-link

activeItemClassName
string
(optional)

Appended to <li> class name for the active element:

<li class='page-item active'><a class='page-link'>1</a></li>

Defaults to active

disabledItemClassName
string
(optional)

Appended to <li> class name for non-clickable elements (disabled nav buttons and the break/ellipsis):

<li class='page-item disabled'><span class='page-link'>...</span></li>

Defaults to disabled

srOnlyClassName
string
(optional)

Class for screen reader only content (which should be visually hidden) - see an example of typical css for this purpose

Setting this prop to '' will turn off all the <span> based screen reader labels (this should be fine in most cases as screen readers will still be able to read the aria-label attributes)

Defaults to sr-only

Label Props

PropDescription
previousLabel
string
(optional)

The label for the previous button, defaults to «

nextLabel
string
(optional)

The label for the next button, defaults to »

ariaPreviousLabel
string
(optional)

The accessibility ARIA label for the previous button, defaults to Previous

ariaNextLabel
string
(optional)

The accessibility ARIA label for the next button, defaults to Next

a11yActiveLabel
string
(optional)

The accessibility label for the active page link, defaults to (current)

Set this prop to '' to turn off the active label

ariaCurrentAttr
boolean
(optional)

Set to true to output aria-current='page' for the active page <li>, defaults to false (aria-current will not be output)

See MDN's article on aria-current for further details

Misc Props

PropDescription
renderNav
boolean
(optional)

When set to false the nav buttons («/») will not be rendered. Defaults to true

narrowStrategy
'dropEllipsis' | 'dropNav' | ('dropEllipsis' | 'dropNav')[]
(optional)

Specify that nav buttons («/») and/or the ellipsis () can be dropped for very narrow widths (useful if the component is used in narrow widths with high page numbers)

'dropEllipsis' - drop the ellipsis () for narrow widths
'dropNav' - drop the nav («/») for narrow widths
['dropNav', 'dropEllipsis'] - drop the nav initially and then further drop the ellipsis if required
['dropEllipsis', 'dropNav'] - drop the ellipsis initially and then further drop the nav if required

The default behaviour is to not drop these elements (this may change in a future major release)

linkHref
'hash' | 'omit'
(optional)

Set to omit to omit href='#' from the page item <a> tags

The default behaviour is to include href='#' in <a> tags