Хуки React — очень полезные инструменты, которые могут повысить вашу производительность, сделать ваш код чистым и сэкономить ваше время. Однако нет хука, доступного для каждого случая вашего проекта, поэтому на помощь пришли пользовательские хуки.

Сегодня мы напишем собственный хук, который возвращает true или false в зависимости от размера окна, которое нам нужно установить, чтобы активировать нужное нам действие.

1. Создайте папку Utils

В файле Utils вы можете разместить все свои пользовательские хуки

Примечание. В проекте Reactjs создайте папку utils внутри src.

Примечание. В проекте Nextjs создайте папку utils на том же уровне, что и папка pages.

2. Затем создайте файл js с именем вашего хука (в моем случае getMediaSize.js)

3. Напишите следующий код

import { useState, useEffect } from 'react'

export const useIsMobile = (width = 767) => {
  const [isMobile, setIsMobile] = useState(false)
  useEffect(() => {
    if (window) {
      setIsMobile(window.innerWidth < width)
      window.addEventListener('resize', () => {
        setIsMobile(window.innerWidth < width)
      })
    }
  })
  return [isMobile, setIsMobile]
}

4. Как использовать хук в коде

import { useIsMobile } from "../utils/getMediaSize";

Я импортировал хук как useIsMobile, потому что функция называется useIsmobile.

{useIsMobile(575) ? (
                <h3 className={styles.author}>
                  <DriveFileRenameOutlineIcon style={{ color: "#581c58" }} />{" "}
                  <span className=" text-[#581c58]"> Written by:</span>
                  <span className="ml-2">{"  "}David Backham</span>
                </h3>
              ) : (
                ""
              )}

Итак, в приведенном выше коде я написал условие, если размер окна равен или меньше 575 пикселей, запишите следующий код (

‹h3 className={styles.author}›
‹DriveFileRenameOutlineIcon style={{ color: "#581c58" }} /›{" "}
‹span className=" text-[#581c58]" › Автор:‹/span›
‹span className="ml-2›{" "}Дэвид Бэкхэм‹/span›
‹/h3›)

else написал пустую строку ‘’

Спасибо за ваше время!