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 Pagination API. The Pagination component 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.
Import Pagination API
import Pagination from '@mui/material/Pagination';
// or
import { Pagination } 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.
- 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.
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.
Syntax: Create a pagination item as follows:
<Pagination count={10} />
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 the Pagination component.
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", }} > neveropen </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: In the following example, we have pagination items of different shapes and colours.
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", }} > neveropen </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/
