Wprowadzenie do Pagination z React Material UI
Witajcie na naszym blogu! Dziś chciałbym poruszyć temat paginacji w React Material UI. Jeśli kiedykolwiek pracowałeś nad stroną internetową lub aplikacją internetową, gdzie potrzebujesz podzielić dużą ilość zawartości na mniejsze części, być może zetknąłeś się z koniecznością implementacji paginacji. React Material UI, popularna biblioteka komponentów interfejsu użytkownika dla Reacta, oferuje wygodne rozwiązania dla tego problemu.
Pagination: Co to właściwie jest?
Paginacja to technika podziału dużej ilości danych na mniejsze części, które są łatwiejsze do przeglądania. Jest to szczególnie przydatne, gdy masz dużą listę elementów, takich jak posty na blogu czy produkty w sklepie internetowym. Zamiast wyświetlać wszystkie elementy na raz, paginacja umożliwia wyświetlanie ich w porcjach, z opcją nawigacji między poszczególnymi stronami.
Link do odcinka: https://www.youtube.com/watch?v=bSHN6q7vzX4
Pagination z React Material UI
Implementacja paginacji za pomocą React Material UI jest stosunkowo prosta i wygodna. Wykorzystujemy komponent Pagination, który oferuje nam wiele opcji dostosowania do naszych potrzeb.
Implementacja w React:
Poniższy kod prezentuje implementację części w React:
1. App.js
import React from 'react'
import OurBlogs from './Components/OurBlogs'
export const App = () => {
return (
<>
<OurBlogs/>
</>
)
}
export default AppPoniższy kod prezentuje implementację części w React:
2. OurBlogs.js
import React from 'react'
import PropTypes from 'prop-types'
import { Box, Grid, Typography, Pagination } from '@mui/material'
import ourPost1 from './ourPost1.jpg'
import ourPost2 from './ourPost2.jpg'
import ourPost3 from './ourPost3.jpg'
import theme from '../../theme'
const blogsArray = [
{
id: 0,
title: 'Exploring New Horizons: Discover, Inspire, Transform',
image: ourPost1,
author: 'Jhon',
date: '28/02/2024'
},
{
id: 1,
title: 'The Art of Living: Uncover Passions and Find Joy in the Everyday',
image: ourPost2,
author: 'Jhon',
date: '28/02/2024'
},
{
id: 2,
title: 'Tech Trends Unleashed: Navigating the Future of Innovation',
image: ourPost3,
author: 'Jhon',
date: '28/02/2024'
},
{
id: 3,
title: 'Exploring New Horizons: Discover, Inspire, Transform',
image: ourPost1,
author: 'Jhon',
date: '28/02/2024'
},
{
id: 4,
title: 'The Art of Living: Uncover Passions and Find Joy in the Everyday',
image: ourPost2,
author: 'Jhon',
date: '28/02/2024'
},
{
id: 5,
title: 'Tech Trends Unleashed: Navigating the Future of Innovation',
image: ourPost3,
author: 'Jhon',
date: '28/02/2024'
},
{
id: 6,
title: 'Exploring New Horizons: Discover, Inspire, Transform',
image: ourPost1,
author: 'Jhon',
date: '28/02/2024'
},
{
id: 7,
title: 'The Art of Living: Uncover Passions and Find Joy in the Everyday',
image: ourPost2,
author: 'Jhon',
date: '28/02/2024'
},
{
id: 8,
title: 'Tech Trends Unleashed: Navigating the Future of Innovation',
image: ourPost3,
author: 'Jhon',
date: '28/02/2024'
}
]
export const OurBlogs = (props) => {
const {
sx,
...otherProps
} = props
// eslint-disable-next-line no-unused-vars
const [paginationPerPage, setPaginationPerPage] = React.useState(6)
const [currentPage, setCurrentPage] = React.useState(1)
const indexOfLastBlog = currentPage * paginationPerPage
const indexOfFirstBlog = indexOfLastBlog - paginationPerPage
const onChangePagination = (e, p) => {
setCurrentPage(p)
}
const numOfTotalPages = Math.ceil(blogsArray.length / paginationPerPage)
const visibleBlogs = blogsArray.slice(indexOfFirstBlog, indexOfLastBlog)
return (
<Box
sx={{
...sx,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
height: '100vh',
backgroundColor: 'white',
padding: '40px'
}}
{...otherProps}
>
<Typography
variant={'h1'}
sx={{
marginBottom: '40px'
}}
>
PAGINATION
</Typography>
<Grid
spacing={{ xs: 2, md: 2 }}
container
>
{
visibleBlogs && visibleBlogs.map((blog) => {
return (
<Grid
key={blog.id}
item
xs={12}
sm={6}
md={4}
>
<Box
color={'black'}
sx={{
display: 'flex',
cursor: 'pointer'
}}
>
<Box>
<img
src={blog.image}
alt={'something'}
style={{
height: '95px',
objectFit: 'cover',
width: '108px'
}}
/>
</Box>
<Box
sx={{
padding: '0px 10px 30px'
}}
>
<Typography
variant={'body2'}
fontWeight={theme.typography.fontWeightBold}
>
{blog.title}
</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'cetner',
justifyContent: 'space-between',
width: '100%'
}}
>
<Typography
variant={'caption'}
>
{blog.author}
</Typography>
<Typography
variant={'caption'}
>
{blog.date}
</Typography>
</Box>
</Box>
</Box>
</Grid>
)
})
}
</Grid>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: '30px'
}}
>
<Pagination
count={numOfTotalPages}
onChange={onChangePagination}
/>
</Box>
</Box>
)
}
OurBlogs.propTypes = {
sx: PropTypes.object
}
export default OurBlogsJak to działa?
- Dane: Najpierw definiujemy zestaw danych, których dotyczy nasza paginacja. W tym przypadku są to posty na blogu, zdefiniowane w tablicy
blogsArray. - Obliczenia: Następnie wykonujemy obliczenia, aby określić, które elementy będą widoczne na aktualnej stronie. Mamy również obliczenia dotyczące łącznej liczby stron.
- Renderowanie: Renderujemy tylko te elementy, które powinny być widoczne na aktualnej stronie.
- Paginacja: W końcowej części komponentu dodajemy komponent Pagination, który umożliwia użytkownikowi nawigację między stronami.
Podsumowanie
Paginacja jest ważnym elementem interfejsu użytkownika, szczególnie gdy mamy do czynienia z dużymi zbiorami danych. Dzięki React Material UI możemy łatwo i wygodnie implementować paginację w naszych projektach React. Mam nadzieję, że ten krótki wpis był dla Ciebie pomocny! Jeśli masz jakieś pytania lub uwagi, nie wahaj się ich podzielić w komentarzach poniżej. Dziękuję za lekturę!
