Pagination

The Pagination component is an interactive indexed navigation element.

Basic Usage

For expanded page content, the Pagination component may be added. Pagination takes props for count, which is the total number of navigable indices within the component. Additional functions include defaultPage, isInverse, and size.

import React from 'react';

import { Pagination } from 'react-magma-dom';

export function Example() {
  return <Pagination count={10} />;
}

Simple Pagination

An alternative presentation of Pagination is available with the type prop when configured as PaginationType.simple. This converts the existing structure into a dropdown format, while still utilizing previous and next navigation buttons.

Please note that the Pagination props of numberOfAdjacentPages, numberOfEdgePages, size, showFirstButton, and showLastButton are not applicable to this type.

import React from 'react';

import { Pagination, PaginationType } from 'react-magma-dom';

export function Example() {
  return <Pagination count={8} type={PaginationType.simple} page={2} />;
}

Inverse

The isInverse property is an optional boolean, that reverses the colors so that the buttons can better appear on a dark background. The default value is false.

import React from 'react';

import { Card, CardBody, Pagination } from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <Pagination isInverse count={4} defaultPage={3} />
      </CardBody>
    </Card>
  );
}

Size

size allows for changing the scale of the Pagination component. Two props are allowed, medium and large.

import React from 'react';

import { Pagination } from 'react-magma-dom';

export function Example() {
  return <Pagination size="large" count={6} page={2} />;
}

Handle Page Change

pageChange passes the active data state of the Pagination component.

import React from 'react';

import { Pagination } from 'react-magma-dom';

export function Example() {
  const [page, setPage] = React.useState(1);

  function handlePageChange(_, pageNumber) {
    setPage(pageNumber);
  }
  return (
    <div>
      <p>
        <strong>Page </strong>
        <span>{page}</span>
      </p>
      <Pagination onPageChange={handlePageChange} count={4} />
    </div>
  );
}

Pagination Props

Any other props supplied will be provided to the wrapping Pagination element.

Common Props

Controlled Props

In order to manage the state and have more control as the developer, use the following props:

Uncontrolled Props

If there isn't a need for that level of control, let the component manage all of the state using the following props: