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.jsimport "./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", }} > w3wiki </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.jsimport "./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", }} > w3wiki </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/
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.