Props Reference

The current active page. Indexed from 1

The total number of pages

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)

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

Class name for the top level <ul> container

Defaults to pagination, overrides extraClassName prop (below)

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

Class name for all the <li> elements

Defaults to page-item

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

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

Defaults to page-link

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

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

Defaults to active

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

Appended to <li> class name for nav items (« / » buttons)

Setting to 'my-nav' would give html similar to:

<li class='page-item my-nav'><span class='page-link'>«</span></li>

By default will not be output

Appended to <li> class name for the previous button («)

Setting to 'my-previous-button' would give html similar to:

<li class='page-item my-previous-button'><span class='page-link'>«</span></li>

Overrides navClassName and by default will not be output

Appended to <li> class name for the next button (»)

Setting to 'my-next-button' would give html similar to:

<li class='page-item my-next-button'><span class='page-link'>»</span></li>

Overrides navClassName and by default will not be output

The label for the previous button, defaults to «

See the FAQ for further information on using React components for this prop

The label for the next button, defaults to »

See the FAQ for further information on using React components for this prop

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

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

Set to false to prevent output of aria-current='page' for the active page <li>

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

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

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)

Valid behaviours should be imported from react-responsive-pagination/narrowBehaviour, example:

import ResponsivePagination from 'react-responsive-pagination';
import { dropEllipsis } from 'react-responsive-pagination/narrowBehaviour';

<ResponsivePagination ... narrowBehaviour={dropEllipsis} />Copy

Valid NarrowBehaviours:

dropEllipsis - drop the ellipsis (…) for narrow widths
dropNav - drop the nav («/») for narrow widths
dropFirstAndLast - drop the first and last pages for narrow widths

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

Using Multiple NarrowBehaviours

Multiple NarrowBehaviours can be combined using the combine helper (also imported from react-responsive-pagination/narrowBehaviour), example:

import ResponsivePagination from 'react-responsive-pagination';
import { dropEllipsis, dropNav, combine } from 'react-responsive-pagination/narrowBehaviour';

<ResponsivePagination
  ...
  narrowBehaviour={combine(dropNav, dropEllipsis)}
/>Copy

The behaviours will be applied in order so in this example, combine(dropNav, dropEllipsis) will drop the nav («/») initially and then further drop the ellipsis (…) if required

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

Set linkHref to a callback to set each item's href to a url. The callback takes the item's page as a parameter, this allows the generated url to include the page number, example:

<ResponsivePagination
  ...
  href={page => `/results/${page}`}
/>Copy

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

for v1 compatibility

V1 of react-reponsive-pagination used visually hidden span tags for screen reader labels (the current version uses only aria attributes). This prop can be used to re-enable the V1 behaviour (if preferred):

import ResponsivePagination from 'react-responsive-pagination';
  import { srOnlySpanLabel } from 'react-responsive-pagination/labelBehaviour';
  ...
  <ResponsivePagination
    ...
    labelBehaviour={srOnlySpanLabel()}
  />Copy

By default 'sr-only' is used as the class for the visually hidden spans. To override this, pass srOnlyClassName:

<ResponsivePagination
    ...
    labelBehaviour={srOnlySpanLabel({ srOnlyClassName: 'my-sr-only' })}
  />Copy

The accessibility label for the active page defaults to (current), to override this pass a11yActiveLabel:

<ResponsivePagination
    ...
    labelBehaviour={srOnlySpanLabel({ a11yActiveLabel: '(active)'})}
  />Copy

(the active label can be turned off by passing a value of '')

For reference, here's an example of a visually hidden css style:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}Copy

CSS-TRICKS - Inclusively Hidden