React MUI PaginationItem API

Last Updated : 06 Oct, 2022

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI PaginationItem API. The icon element is used to create different icons of different shapes and sizes with various colors. The PaginationItems are individual page numbers displayed. The API provides a lot of functionality and we will learn to implement them.

Import PaginationItem API

import PaginationItem from '@mui/material/PaginationItem';
// or
import { PaginationItem } from '@mui/material';

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

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.
component (elementType): It is used for the root node.
components (elementType): It is used to set first, last, previous and next buttons.
disabled (bool): If set to true, the component is disabled. The default value is false.
page (integer): It is used to set the current page.
selected (bool): If set to true, the pagination item is selected. The default value is set to false.
shape (circular/rounded): It is used to set the shape of items. The default value is circular.
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
type (end-ellipsis/first/last/next/page/previous/start-ellipsis): It is used to set the pagination items. The default value is page.
variant (outlined/text): It is used to set the variant. The default value is text.

CSS Rules:

root (.MuiPaginationItem-root): It is the style applied to the root element.
page (.MuiPaginationItem-page): It is the style applied to the root element if the type is page.
sizeSmall (.MuiPaginationItem-sizeSmall): It is the style applied to the root element if size is small.
sizeLarge (.MuiPaginationItem-sizeLarge): It is the style applied to the root element if size is set to large.
text (.MuiPaginationItem-text): It is the style applied to the root element if the variant is set to the text.
textPrimary (.MuiPaginationItem-textPrimary): It is the style applied to the root element if the variant is set to text and color is set to primary.
textSecondary (.MuiPaginationItem-textSecondary): It is the style applied to the root element if the variant is set to text and color is set to secondary.
outlined (.MuiPaginationItem-outlined): It is the style applied to the root element if the variant is set to outlined.
outlinedPrimary (.MuiPaginationItem-outlinedPrimary): It is the style applied to the root element if the variant is set to outlined and the color is set to primary.
outlinedSecondary (.MuiPaginationItem-outlinedSecondary): It is the style applied to the root element if the variant is set to outlined and color is set to secondary.
rounded (.MuiPaginationItem-rounded): It is the style applied to the root element if rounded is set to true.
ellipsis (.MuiPaginationItem-ellipsis): It is the style applied to the root element if the type is set to start-ellipsis or the type is set to end-ellipsis.
firstLast (.MuiPaginationItem-firstLast): It is the style applied to the root element if `type is set to first or type is set to last.
previousNext (.MuiPaginationItem-previousNext): It is the style applied to the root element if the type is set to previous or the type is set to next.
focusVisible (.Mui-focusVisible): It is the state class applied to the root element if the keyboard is focused.
disabled (.Mui-disabled): It is the state class applied to the root element if disabled is set to true.
selected (.Mui-selected): It is the state class applied to the root element if selected is set to true.
icon (.MuiPaginationItem-icon): It is the style applied to the icon to display.

Syntax:

<Pagination
    page={page}
    onChange={handleChange}
    count={10}
    renderItem={(item) => (
        <PaginationItem
            components={{ 
                previous: ArrowBackIcon, 
                next: ArrowForwardIcon 
            }}
            {...item}
        />
    )}
/>

Installing and Creating React app, and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

Project Structure: The project should look like the below:

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have created the custom arrows as PaginationItems.

App.js

import "./App.css"; 
import * as React from "react"; 
import Pagination from "@mui/material/Pagination"; 
import PaginationItem from "@mui/material/PaginationItem"; 
import Stack from "@mui/material/Stack"; 
import ArrowBackIcon from "@mui/icons-material/ArrowBack"; 
import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; 
import { Box, 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 PaginationItem API</strong> 
            </div> 
            <br /> 
  
            <Box 
                sx={{ 
                    margin: "auto", 
                    width: "fit-content", 
                    alignItems: "center", 
                }} 
            > 
                <Typography fontSize={32} align="center"> 
                    Page: {page} 
                </Typography> 
                <Stack spacing={2}> 
                    <Pagination 
                        onChange={handleChange} 
                        count={10} 
                        renderItem={(item) => ( 
                            <PaginationItem 
                                components={{  
                                    previous: ArrowBackIcon,  
                                    next: ArrowForwardIcon  
                                }} 
                                {...item} 
                            /> 
                        )} 
                    /> 
                </Stack> 
            </Box> 
        </div> 
    ); 
} 
export default App;

Output:

Example 2: In the following example, we have created the PaginationItem of different sizes.

App.js

import "./App.css"; 
import * as React from "react"; 
import Pagination from "@mui/material/Pagination"; 
import PaginationItem from "@mui/material/PaginationItem"; 
import Stack from "@mui/material/Stack"; 
import ArrowBackIcon from "@mui/icons-material/ArrowBack"; 
import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; 
import { Box, 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 PaginationItem API</strong> 
            </div> 
            <br /> 
            <Box 
                sx={{ 
                    margin: "auto", 
                    width: "fit-content", 
                    alignItems: "center", 
                }} 
            > 
                <Typography fontSize={32} align="center"> 
                    Page: {page} 
                </Typography> 
                <Stack spacing={2}> 
                    <Pagination 
                        onChange={handleChange} 
                        count={10} 
                        size="large"
                        renderItem={(item) => ( 
                            <PaginationItem 
                                components={{ 
                                    previous: ArrowBackIcon, 
                                    next: ArrowForwardIcon 
                                }} 
                                {...item} 
                            /> 
                        )} 
                    /> 
                    <Pagination 
                        onChange={handleChange} 
                        count={10} 
                        size="medium"
                        renderItem={(item) => ( 
                            <PaginationItem 
                                components={{ 
                                    previous: ArrowBackIcon, 
                                    next: ArrowForwardIcon 
                                }} 
                                {...item} 
                            /> 
                        )} 
                    /> 
                    <Pagination 
                        onChange={handleChange} 
                        count={10} 
                        size="small"
                        renderItem={(item) => ( 
                            <PaginationItem 
                                components={{ 
                                    previous: ArrowBackIcon, 
                                    next: ArrowForwardIcon 
                                }} 
                                {...item} 
                            /> 
                        )} 
                    /> 
                </Stack> 
            </Box> 
        </div> 
    ); 
} 
export default App;