مقدمه ای بر صفحه بندی در React با استفاده از react-paginate

صفحه بندی یک تکنیک مفید است که اکثر برنامه های پر داده می توانند از آن بهره مند شوند. کتابخانه react-paginate به شما کمک می کند این فرآیند را ساده کنید.

سازماندهی و نمایش حجم زیادی از داده ها به شیوه ای کاربرپسند، تجربه کاربر را بهبود می بخشد. یکی از تکنیک های مورد استفاده برای رسیدن به این هدف، صفحه بندی است.

در React، کتابخانه react-paginate می تواند به شما در ساده سازی پیاده سازی کمک کند.

مقدمه ای بر کتابخانه react-paginate

کتابخانه react-paginate رندر صفحه بندی در React را آسان می کند. این به شما امکان می دهد موارد را در صفحات فهرست کنید و گزینه های قابل تنظیم برای مواردی مانند اندازه صفحه، محدوده صفحه و تعداد صفحات را ارائه می دهد. همچنین دارای یک کنترل کننده رویداد داخلی است تا بتوانید برای پاسخ به تغییرات صفحه کد بنویسید.

در زیر، خواهید دید که چگونه می توانید از react-paginate برای صفحه بندی داده های بازیابی شده از یک API استفاده کنید.

راه اندازی پروژه

برای شروع، با استفاده از دستور create-react-app یا Vite یک پروژه React ایجاد کنید. این آموزش از Vite استفاده می کند. می توانید دستورالعمل های مربوط به نحوه راه اندازی پروژه های React را با Vite در این پست بیابید.

پس از ایجاد پروژه، برخی از محتوای App.jsx را حذف کنید تا با این کد مطابقت داشته باشد:

function App() {
  return (
    <div> </div>
  );
}

export default App;

این به شما یک فایل تمیز برای شروع کار با react-paginate می دهد.

تنظیم داده ها

داده‌ها را از API جای‌بان JSON دریافت خواهید کرد. این API نقاط پایانی را برای پست ها، نظرات، آلبوم ها، عکس ها، کارها و کاربران فراهم می کند. از طریق نقطه پایانی پست‌ها، با استفاده از Axios، یک کتابخانه مشتری HTTP، داده‌ها را از API دریافت خواهید کرد.

برای شروع، Axios را با استفاده از این دستور ترمینال نصب کنید:

npm install axios

سپس، کتابخانه useEffect hook و axios را در بالای App.jsx وارد کنید، سپس پست‌ها را مانند شکل زیر از API واکشی کنید.

import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState([]);
     
  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
      setData(response.data);
    });
  }, []);

  return (
    <div> </div>
  );
}

export default App;

قلاب useState یک متغیر حالت به نام داده را با یک آرایه خالی مقدار دهی اولیه می کند. هنگامی که API پست ها را برمی گرداند، از تابع setData برای به روز رسانی وضعیت استفاده خواهید کرد.

پیاده سازی صفحه بندی با react-paginate

اکنون که پروژه را راه‌اندازی کرده‌اید و داده‌ها را واکشی کرده‌اید، وقت آن است که صفحه‌بندی را با استفاده از react-paginate اضافه کنید. در زیر مراحلی وجود دارد که باید دنبال کنید:

1. react-paginate را نصب کنید

برای نصب react-paginate با استفاده از npm دستور زیر را اجرا کنید.

npm install react-paginate

2. حالت اولیه صفحات را تنظیم کنید

از قلاب useState برای پیگیری صفحه جاری و تعداد کل صفحات استفاده کنید.

const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);

همچنین باید تعداد کل مواردی که یک صفحه می تواند داشته باشد را مشخص کنید.

const itemsPerPage = 10 

در قلاب useEffect، خط زیر را اضافه کنید تا تعداد کل صفحات را بر اساس طول داده و تعداد موارد در هر صفحه محاسبه کنید. سپس آن را در متغیر وضعیت totalPages ذخیره کنید.

setTotalPages(Math.ceil(response.data.length / itemsPerPage));

قلاب useEffect شما اکنون باید به شکل زیر باشد:

useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
      setData(response.data);
      setTotalPages(Math.ceil(response.data.length / itemsPerPage))
    });
  }, []);

3. یک تابع برای مدیریت تغییرات صفحه تعریف کنید

ابتدا متغیرهای startIndex، endIndex و subset را تعریف کنید تا زیرمجموعه داده ها بر اساس شماره صفحه فعلی ارائه شوند.

const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice(startIndex, endIndex);

این کد مقادیر startIndex و endIndex را بر اساس مقدار statusPage و مقدار itemsPerPage محاسبه می کند. سپس از این متغیرها استفاده می کند تا آرایه داده را به زیر مجموعه ای از آیتم ها تقسیم کند.

سپس تابع handlePageChange را اضافه کنید. این یک کنترل کننده رویداد است که وقتی کاربر روی دکمه Next کلیک کند اجرا می شود.

const handlePageChange = (selectedPage) => {
    setCurrentPage(selectedPage.selected);
};

در مجموع، برنامه شما باید به شکل زیر باشد:

import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(0);
  const [totalPages, setTotalPages] = useState(0);
  const itemsPerPage = 10;

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/').then((response) => {
      setData(response.data);
    });

    setTotalPages(Math.ceil(response.data.length / itemsPerPage));
  }, []);

  const startIndex = currentPage * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const subset = data.slice(startIndex, endIndex);

  const handlePageChange = (selectedPage) => {
    setCurrentPage(selectedPage.selected);
  };

  return (
    <div> </div>
  );
}

export default App;

4. صفحه بندی را اضافه کنید

مرحله آخر این است که صفحات را با استفاده از کامپوننت ReactPaginate رندر کنید. عبارت زیر را به دستور return اضافه کنید و جایگزین div خالی کنید.

<div>
    {subset.map((item) => (
        <div key={item.id}>{item.title}</div>
    ))}
    <ReactPaginate
        pageCount={totalPages}
        onPageChange={handlePageChange}
        forcePage={currentPage}
    />
</div>

این مورد روی آیتم‌های زیرمجموعه فعلی تکرار می‌شود و آنها را رندر می‌کند و props pageCount، onPageChange و forceChange را به ReactPaginate منتقل می‌کند.

سفارشی کردن react-paginate

react-paginate چندین ابزار ارائه می دهد که به شما امکان می دهد ظاهر و احساس جزء صفحه بندی را مطابق با نیازهای برنامه خود سفارشی کنید.

در اینجا چند نمونه آورده شده است.

• دکمه های بعدی و قبلی را با استفاده از برپایه های previousLabel و nextLabel سفارشی کنید. برای مثال می توانید از لیبل های شورون مانند شکل زیر استفاده کنید. >”}/>
• برچسب break را با استفاده از پایه breakLabel سفارشی کنید. برچسب شکستن برچسبی است که زمانی نمایش داده می شود که تعداد صفحات زیاد باشد و مؤلفه صفحه بندی قادر به نمایش همه پیوندهای صفحه نیست. در عوض، یک شکست را که با برچسب break نشان داده شده است، بین پیوندها نمایش می دهد. در اینجا یک مثال است که از بیضی استفاده می کند.
• تعداد صفحات برای نمایش را سفارشی کنید. اگر نمی خواهید همه صفحات نمایش داده شوند، می توانید تعداد صفحات را با استفاده از prop pageCount مشخص کنید. کد زیر تعداد صفحات را 5 مشخص می کند.
• سفارشی سازی کانتینر و کلاس های فعال. می توانید نام کلاس ها را برای محفظه صفحه بندی و پیوند صفحه فعال به ترتیب با استفاده از props containerClassName و activeClassName سفارشی کنید. سپس می‌توانید با استفاده از این کلاس‌ها به مؤلفه صفحه‌بندی استایل دهید تا زمانی که با ظاهر برنامه شما مطابقت داشته باشد.

<ReactPaginate
  previousLabel={"<<"}
  nextLabel={">>"}
/>

<ReactPaginate
  breakLabel={"..."}
/>

<ReactPaginate
  pageCount={5}
/>

<ReactPaginate
  containerClassName={"pagination-container"}
  activeClassName={"active-page"}
/>

این لیست کاملی از گزینه های سفارشی سازی موجود نیست. بقیه را می توانید در اسناد کتابخانه react-paginate بیابید.

با استفاده از صفحه بندی، تجربه کاربری را بهبود بخشید

صفحه بندی یک ویژگی مهم در هر برنامه ای است که حجم زیادی از داده را نمایش می دهد. بدون صفحه بندی، کاربران باید در لیست های طولانی برای یافتن اطلاعات مورد نیاز خود حرکت کنند، که زمان بر است.

صفحه بندی به کاربران این امکان را می دهد که به راحتی به داده های خاصی که به دنبال آن هستند با تقسیم آنها به قطعات کوچکتر و قابل مدیریت تر حرکت کنند. این نه تنها در زمان صرفه جویی می کند، بلکه پردازش اطلاعات را برای کاربران آسان تر می کند.

منبع مقاله