Хуки 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 написал пустую строку ‘’