Components

#Pager Pager, Pager.Item

Quick previous and next links.

#Centers by default

<Pager>
  <Pager.Item href="#">Previous</Pager.Item>{' '}
  <Pager.Item href="#">Next</Pager.Item>
</Pager>;

#Aligned

Set the previous or next prop to true, to align left or right.

<Pager>
  <Pager.Item previous href="#">
    &larr; Previous Page
  </Pager.Item>
  <Pager.Item next href="#">
    Next Page &rarr;
  </Pager.Item>
</Pager>;

#Disabled

Set the disabled prop to true to disable the link.

<Pager>
  <Pager.Item previous href="#">
    &larr; Previous
  </Pager.Item>
  <Pager.Item disabled next href="#">
    Next &rarr;
  </Pager.Item>
</Pager>;

#Props

#Pager[source]

NameTypeDefaultDescription
onSelect
function
bsClass
string
'pager'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

#Pager.Item[source]

NameTypeDefaultDescription
disabled
boolean
false
previous
boolean
false
next
boolean
false
onClick
function
onSelect
function
eventKey
any

A unique identifier for the Component, the eventKey makes it distinguishable from others in a set. Similar to React's key prop, in that it only needs to be unique amoungst the Components siblings, not globally.

Pagination

A set of presentational components for building pagination UI.

Migration Details

In previous versions of ReactBootstrap, the Pagination components contained "business" logic related to pagination. Considering logic of this sort is almost always application and use-case specific we've removed it in favor of purely presentational components (just like vanilla bootstrap).

In order to help migration we've provided a drop-in replacement for the old component at: @react-bootstrap/pagination



let active = 7;
let items = [];
for (let number = 1; number <= 10; number++) {
  items.push(
    <Pagination.Item active={number === active}>{number}</Pagination.Item>
  );
}

const paginationBasic = (
  <div>
    <Pagination bsSize="large">{items}</Pagination>
    <br />

    <Pagination bsSize="medium">{items}</Pagination>
    <br />

    <Pagination bsSize="small">{items}</Pagination>
  </div>
);

render(paginationBasic);

#More options

For building more complex pagination UI, there are few convenient sub-components for adding "First", "Previous", "Next", and "Last" buttons, as well as an Ellipsis item for indicating previous or continuing results.

<Pagination>
  <Pagination.First />
  <Pagination.Prev />
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Ellipsis />

  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>{11}</Pagination.Item>
  <Pagination.Item active>{12}</Pagination.Item>
  <Pagination.Item>{13}</Pagination.Item>
  <Pagination.Item disabled>{14}</Pagination.Item>

  <Pagination.Ellipsis />
  <Pagination.Item>{20}</Pagination.Item>
  <Pagination.Next />
  <Pagination.Last />
</Pagination>;
NameTypeDefaultDescription
bsClass
string
'pagination'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.