Работа с пагинацией и хуками на ReactJS

месяц назад·2 мин. на чтение

В данной статье мы рассмотрим, как использовать хуки на ReactJS для работы с пагинацией и создания эффективной навигации по данным.

Основной принцип React состоит в создании компонентов, которые отображают и управляют состоянием пользовательского интерфейса. Одним из основных аспектов разработки с использованием ReactJS является работа с пагинацией и хуками. Пагинация - это процесс разделения длинного списка данных на несколько страниц, чтобы упростить навигацию пользователю. Пагинация может быть особенно полезна, когда необходимо отобразить большое количество данных и при этом сохранить производительность приложения. Хуки - это новая функциональность, появившаяся в ReactJS 16.8. Они позволяют использовать состояние и другие возможности React внутри функциональных компонентов. Хуки делают код более читабельным, улучшают его структуру и сокращают объем необходимого кода. Давайте рассмотрим, как работать с пагинацией и хуками на ReactJS для функциональных компонентов.

Шаг 1: Создание компонента и состояния

Сначала создайте функциональный компонент с помощью хука useState. Этот хук позволяет добавить состояние в функциональный компонент.
import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <div>
      {/* Вставьте здесь свои компоненты для отображения данных */}
    </div>
  );
}

export default PaginationComponent;

Шаг 2: Создание функций для обработки пагинации

Создайте функции для обработки пагинации, такие как переключение на предыдущую и следующую страницу.
import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  const goToPreviousPage = () => {
    setCurrentPage((prev) => prev - 1);
  };

  const goToNextPage = () => {
    setCurrentPage((prev) => prev + 1);
  };

  return (
    <div>
      {/* Вставьте здесь свои компоненты для отображения данных */}
      <button onClick={goToPreviousPage}>Предыдущая страница</button>
      <button onClick={goToNextPage}>Следующая страница</button>
    </div>
  );
}

export default PaginationComponent;

Шаг 3: Использование состояния для отображения данных

Используйте текущую страницу для отображения соответствующих данных. Например, вы можете отобразить только 10 элементов на странице.
import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  const goToPreviousPage = () => {
    setCurrentPage((prev) => prev - 1);
  };

  const goToNextPage = () => {
    setCurrentPage((prev) => prev + 1);
  };

  // Предположим, у вас есть массив данных, который вам нужно отобразить
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  const itemsPerPage = 10;
  const startIndex = (currentPage - 1) * itemsPerPage;
  const displayedData = data.slice(startIndex, startIndex + itemsPerPage);

  return (
    <div>
      {/* Отображение данных */}
      {displayedData.map((item) => (
        <div key={item}>{item}</div>
      ))}

      {/* Навигация по страницам */}
      <button onClick={goToPreviousPage} disabled={currentPage === 1}>
        Предыдущая страница
      </button>
      <button onClick={goToNextPage} disabled={currentPage === Math.ceil(data.length / itemsPerPage)}>
        Следующая страница
      </button>
    </div>
  );
}

export default PaginationComponent;
Это основы работы с пагинацией и хуками на ReactJS для функциональных компонентов. Вы можете настроить логику пагинации и функции обработки в зависимости от ваших потребностей. Помните, что React предлагает огромную гибкость при создании пользовательского интерфейса, и пагинация с хуками - только один из множества способов использования этой библиотеки.

Хук useResize для отслеживания ширины экрана в ReactJS

2 года назад·1 мин. на чтение

В этой статье напишем кастомный React хук для прослушивания ширины экрана - useResize.

Хук useResize довольно часто встречается в React приложениях. useResize - хук, который прослушивает изменения ширины экрана. Далее на основе ширины можно, например, скрывать или показывать компоненты на экране. useResize будет использовать стандартные размеры экрана из bootstrap.
БрейкпоинтidРазмер экрана
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥1400px
Добавим эти брейкпоинты в файл констант размеров экрана.
// const-breakpoints.js
export const SCREEN_SM = 576;
export const SCREEN_MD = 768;
export const SCREEN_LG = 992;
export const SCREEN_XL = 1200;
export const SCREEN_XXL = 1400;
useResize будет возвращать ширину экрана, а также индикаторы достижения брейкпоинтов. Подпишемся на событие resize из window. Значение ширины экрана будем читать из поля innerWidth.
// use-resize.js
import { useState, useEffect } from 'react';
import {
  SCREEN_SM, SCREEN_MD, SCREEN_LG, SCREEN_XL, SCREEN_XXL,
} from './const-breakpoints';

export const useResize = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = (event) => {
      setWidth(event.target.innerWidth);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return {
    width,
    isScreenSm: width >= SCREEN_SM,
    isScreenMd: width >= SCREEN_MD,
    isScreenLg: width >= SCREEN_LG,
    isScreenXl: width >= SCREEN_XL,
    isScreenXxl: width >= SCREEN_XXL,
  };
};

Пример работы

При достижении ширины экрана 799px, флаги isScreenSm и isScreenMd будут иметь значения true. react_hook_use_Resize Исходный код