Создание простого хука React для определения размера экрана

Эй, ребята! 🌟 В этой супер крутой статье мы погрузимся в мир адаптивного веб-дизайна с использованием React. Мы узнаем, как создать простой хук React, который обнаруживает изменения размера экрана. Увлекательно, правда? Давайте начнем и запустим эту отзывчивую игру! 🚀

Предпосылки

Прежде чем мы начнем, убедитесь, что вы знакомы с React и хуками React. Некоторые базовые знания JavaScript и JSX также будут полезны. Если вы уже на борту, давайте рок-н-ролл! 🎸

Настройка проекта

Для начала нам нужен проект React. Не беспокойтесь, просто создайте новый проект React, используя Create React App или любой другой необычный метод:

npx create-react-app screen-size-hook-demo
cd screen-size-hook-demo

Создание пользовательского хука ⚓️

Хорошо, все готово! Теперь давайте погрузимся в создание собственного пользовательского хука для обнаружения изменений размера экрана. В папке src давайте создадим новый файл с именем useScreenSize.js. Вот где происходит волшебство! ✨

// useScreenSize.js
import { useState, useEffect } from 'react';

const useScreenSize = () => {
  const [screenSize, setScreenSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setScreenSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);

    // Clean up the event listener when the component unmounts
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return screenSize;
};

export default useScreenSize;

Custom Hook Magic ✨

Эй, посмотрите на этот причудливый код! 😎 Давайте разберем это очень быстро:

Мы импортируем хуки useState и useEffect из React. Вы знаете, у React есть несколько крутых зацепок! 🎣
Мы создаем наш пользовательский хук с именем useScreenSize, который устанавливает начальное состояние для screenSize с текущими размерами экрана.
Внутри хука useEffect мы добавляем прослушиватель событий к объекту окна для обнаружения событий изменения размера экрана.
Всякий раз, когда изменяется размер окна, срабатывает функция handleResize, обновляющая состояние screenSize новыми размерами.
Мы ответственные разработчики, поэтому убираем прослушиватель событий в функции очистки, чтобы избежать нежелательного беспорядка. 🧹

Использование пользовательского хука

Хорошо, мы построили крючок, но как мы его используем? Не волнуйся; это бриз! Просто взгляните на этот App.js файл:

// App.js
import React from 'react';
import useScreenSize from './useScreenSize';

const App = () => {
  const screenSize = useScreenSize();

  return (
    <div>
      <h1>Screen Size Detection with React Hook</h1>
      <p>Width: {screenSize.width}</p>
      <p>Height: {screenSize.height}</p>
    </div>
  );
};

export default App;

Простота в использовании! 🌈

Супер просто, правда? Все, что мы сделали, это импортировали созданный нами хук useScreenSize и вызвали его внутри компонента App. Объект screenSize содержит текущие width и height экрана, и мы с гордостью показываем их на странице! 🎉

Заключение

Вот так, амигос!