React MUI Pagination API

The React MUI Pagination API allows the users to select one of the many pages given in a list form. Users can choose a page from a range of pages. The API provides a lot of functionality and we will learn to implement them.

React MUI Pagination API

React MUI Pagination API provides access to the MUI Pagination components. It facilitates the user to select individual pages from a range. Below are simple steps to import and use the Pagination Component.

Import React MUI Pagination API

import Pagination from '@mui/material/Pagination';
// OR
import { Pagination } from '@mui/material';

React MUI Pagination Syntax:

Create a pagination item as follows:

<Pagination count={10} />

React MUI Pagination Props List:

Here is the list of different props used with this component. We can access them and modify them according to our needs.

• boundaryCount(number): It is used to set the number of pages visible at the beginning and at the end. The default value is 1.
• classes(object): It is used to override the default styles and add custom functionalities.
• color(primary/secondary/standard): It is used to set the active color of the component. The default value is standard.
• count(integer): It is used to set the number of pages in the pagination. The default value is 1.
• disabled(bool): If set to true, the component is disabled. The default value is false.
• getItemAriaLabel(func): It accepts a function that returns a string value that provides a name for the current page.
• hideNextButton(bool): If set to true, the next button in the pagination is hidden. The default value is false.
• hidePrevButton(bool): If set to true, the previous button in the pagination is hidden. The default value is false.
• page(integer): It is used to set the current page.
• renderItem(func): It renders an item.
• shape(circular/rounded): It is used to set the shape of items. The default value is circular.
• showFirstButton(bool): If set to true, the first button in the pagination is shown. The default value is false.
• showLastButton(bool): If set to true, the last button in the pagination is shown. The default value is false.
• siblingCount(integer): It is used to set the number of always visible pages before and after the current page. The default value is 1.
• size(small/medium/large): It is used to set the size of the pagination item. The default value is medium.
• sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles
• variant(outlined/text): It is used to set the variant. The default value is text.

React MUI Pagination CSS Rules:

• root(.MuiPagination-root): It is used to set the style applied to the root element.
• ul(.MuiPagination-ul): It is used to set the style applied to the ul element.
• outlined(.MuiPagination-outlined): It is used to set the style applied to the root element if the variant is outlined.
• text(.MuiPagination-text): It is used to set the style applied to the root element if the variant is text.

React MUI Pagination API Examples

Below are the examples for React MUI Pagination API with differnt styles.

Example 1: React MUI Pagination Component

In the following example, we have the Pagination component.

Javascript

// Filename - App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import { Pagination, Typography } from "@mui/material";

function App() {
    const [page, setPage] = React.useState(1);
    const handleChange = (event, value) => {
        setPage(value);
    };
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Pagination API</strong>
            </div>
            <br />
            <Box
                sx={{
                    margin: "auto",
                    width: "fit-content",
                    alignItems: "center",
                }}
            >
                <Typography fontSize={32} align="center">
                    Page: {page}
                </Typography>
                <Pagination count={10} page={page}
                    onChange={handleChange} />
            </Box>
        </div>
    );
}
export default App;

Output:

Example 2: React MUI Pagination Component with Multiple Styles

In the following example, we have pagination items of different shapes and colours.

Javascript

// Filename - App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import { Pagination, Typography } from "@mui/material";

function App() {
    const [page1, setPage1] = React.useState(1);
    const handleChange1 = (event, value) => {
        setPage1(value);
    };
    const [page2, setPage2] = React.useState(1);
    const handleChange2 = (event, value) => {
        setPage2(value);
    };
    const [page3, setPage3] = React.useState(1);
    const handleChange3 = (event, value) => {
        setPage3(value);
    };
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Pagination API</strong>
            </div>
            <br />
            <Box
                sx={{
                    margin: "auto",
                    width: "fit-content",
                    alignItems: "center",
                }}
            >
                <Typography fontSize={32} align="center">
                    Page: {page1}
                </Typography>
                <Pagination count={10} page={page1}
                    onChange={handleChange1} />
                <Typography fontSize={32} align="center">
                    Page: {page2}
                </Typography>
                <Pagination
                    count={10}
                    page={page2}
                    onChange={handleChange2}
                    variant="outlined"
                    color="primary"
                />
                <Typography fontSize={32} align="center">
                    Page: {page3}
                </Typography>
                <Pagination
                    count={10}
                    page={page3}
                    onChange={handleChange3}
                    variant="outlined"
                    shape="rounded"
                    color="secondary"
                />
            </Box>
        </div>
    );
}
export default App;

Output:

Reference: https://mui.com/material-ui/api/pagination/