В современном цифровом мире адаптивный веб-дизайн приобрел первостепенное значение. Пользователи ожидают, что веб-сайты будут легко адаптироваться к экранам разных размеров и устройствам. Один из способов добиться этого в приложении Next.js — использовать перехватчик useWindowSize. В этой статье мы рассмотрим различные методы использования этого хука для обработки изменения размера окна в Next.js. Итак, хватайте свое снаряжение для кодирования и начнем!

Метод 1: базовое использование хука useWindowSize
Хук useWindowSize обеспечивает простой способ доступа к текущим размерам окна браузера. Вот пример того, как его использовать:

import { useEffect } from 'react';
import useWindowSize from 'your-useWindowSize-library';
const MyComponent = () => {
  const { width, height } = useWindowSize();
  useEffect(() => {
    console.log(`Window width: ${width}px, height: ${height}px`);
  }, [width, height]);
  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
};
export default MyComponent;

Метод 2: устранение дребезга событий изменения размера окна
В некоторых случаях может потребоваться устранить дребезг событий изменения размера окна, чтобы избежать чрезмерного повторного рендеринга. Вот пример того, как этого можно добиться с помощью библиотеки lodash:

import { useEffect } from 'react';
import useWindowSize from 'your-useWindowSize-library';
import debounce from 'lodash/debounce';
const MyComponent = () => {
  const { width, height } = useWindowSize();
  const handleResize = debounce(() => {
    // Handle resizing logic here
  }, 300);
  useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [handleResize]);
  return (
    // JSX code here
  );
};
export default MyComponent;

Метод 3: условный рендеринг на основе размера окна
Другой распространенный вариант использования — условный рендеринг компонентов на основе размера окна. Вот пример того, как этого можно добиться с помощью хука useWindowSize:

import { useEffect } from 'react';
import useWindowSize from 'your-useWindowSize-library';
const MyComponent = () => {
  const { width } = useWindowSize();
  useEffect(() => {
    // Logic for conditional rendering based on window width
  }, [width]);
  return (
    // JSX code here
  );
};
export default MyComponent;

В этой статье мы рассмотрели различные методы использования перехватчика useWindowSize в Next.js для обработки изменения размера окна. Мы рассмотрели базовое использование перехватчика, устранение событий изменения размера окна и условный рендеринг в зависимости от размера окна. Включив эти методы в свои приложения Next.js, вы можете обеспечить бесперебойную и отзывчивую работу пользователей на разных устройствах и размерах экрана. Так что давайте, попробуйте и наблюдайте, как ваш сайт легко адаптируется!