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;
|
Output:
Reference: https://mui.com/material-ui/api/pagination-item/#main-content