Хук useResize для отслеживания ширины экрана в ReactJS
2 года назад·1 мин. на чтение
В этой статье напишем кастомный React хук для прослушивания ширины экрана - useResize.
Хук
Добавим эти брейкпоинты в файл констант размеров экрана.
useResize
довольно часто встречается в React приложениях. useResize
- хук, который прослушивает изменения ширины экрана. Далее на основе ширины можно, например, скрывать или показывать компоненты на экране. useResize
будет использовать стандартные размеры экрана из bootstrap.
Брейкпоинт | id | Размер экрана |
---|---|---|
Small | sm | ≥576px |
Medium | md | ≥768px |
Large | lg | ≥992px |
Extra large | xl | ≥1200px |
Extra extra large | xxl | ≥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
.
Исходный код5 кастомных React хуков, которые улучшат ваш код
2 года назад·3 мин. на чтение
В этой статье рассмотрим несколько очень полезных React хуков.
1. Хук useWindowSize
- хук для получения размера экрана
Я уверен, что в некоторых проектах, над которыми вы работали, вам нужно было получить ширину и высоту окна пользователя.
Так вот, теперь у вас есть хук для этого, так что вы можете сделать это еще проще, чем раньше.
Этот хук может быть особенно полезен при реализации отзывчивого дизайна, когда по какой-то причине вам нужно запустить определенный код при определенных размерах. Более продвинутый вариант этого хука можно найти в статье “Хук useResize для отслеживания ширины экрана в ReactJS”.import { useState, useEffect } from "react"; interface WindowSize { width: number; height: number; } const useWindowSize = (): WindowSize => { const [windowSize, setWindowSize] = useState<WindowSize>({ width: window.innerWidth, height: window.innerHeight, }); useEffect(() => { const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); }; window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); return windowSize; };
2️. Хук useKeyPress
- хук для определения нажатия клавиши
Следующий хук позволяет определить, когда нажата определенная клавиша. Это может вызвать события или действия, основанные на нажатой клавише. Например, для закрытия модального окна, отправки формы и т.д.
Пример использования:import { useState, useEffect } from "react"; const useKeyPress = (targetKey: string): boolean => { const [keyPressed, setKeyPressed] = useState(false); const downHandler = ({ key }: KeyboardEvent) => { if (key === targetKey) { setKeyPressed(true); } }; const upHandler = ({ key }: KeyboardEvent) => { if (key === targetKey) { setKeyPressed(false); } }; useEffect(() => { window.addEventListener("keydown", downHandler); window.addEventListener("keyup", upHandler); return () => { window.removeEventListener("keydown", downHandler); window.removeEventListener("keyup", upHandler); }; }, []); return keyPressed; };
const closeModalKeyPress = useKeyPress("Escape");
3. Хук useInterval
- хук для вызова функции setInterval
Этот хук позволяет вам использовать функцию setInterval
в качестве хука. Как и функция setInterval
, этот хук имеет множество применений, например, анимация, обновление данных через регулярные промежутки времени или даже установка таймера.
Можно использовать этот хук следующим образом:import { useState, useEffect, useRef } from "react"; const useInterval = (callback: () => void, delay: number | null) => { const savedCallback = useRef<() => void>(); useEffect(() => { savedCallback.current = callback; }, [callback]); useEffect(() => { function tick() { savedCallback.current && savedCallback.current(); } if (delay !== null && delay > 0) { let id = setInterval(tick, delay); return () => clearInterval(id); } else { tick(); } }, [delay]); };
const [count, setCount] = useState(0); useInterval(() => { setCount(count + 1); }, 1000);
4. Хук useDebounce
Теперь мы поговорим о хуке, который выполняет функцию только после того, как пройдет определенное количество времени без ее вызова.
Это полезно, например, для ограничения скорости вызовов API или обновления состояния при изменении ввода, например, когда вы набираете текст в поисковой строке.
Пример использования:import { useEffect, useRef } from 'react'; export function useDebounce(callback:Function, timeout: number = 200, deps: Array<any> = []) { const data = useRef({ firstTime: true }); useEffect(() => { const { firstTime, clearFunc } = data.current; const handler = setTimeout(() => { if (clearFunc && typeof clearFunc === 'function') { clearFunc(); } data.current.clearFunc = callback(); }, timeout); return () => { clearTimeout(handler); }; }, [timeout, ...deps]); } export default useDebounce;
const [inputValue, setInputValue] = useState(""); useDebounce(() => { // вызов APIl }, 500);
5️. Хук useThrottle
Throttle означает, что функция будет выполняться один раз за каждый заданный промежуток времени. Это может быть полезно для предотвращения быстрого запуска слишком большого количества вызовов API или событий.
Пример:import { useEffect, useRef } from 'react'; export const useThrottle = (callback:Function, delay: number = 200, deps: Array<any> = []) => { const lastRan = useRef(Date.now()); useEffect( () => { const handler = setTimeout(function() { if (Date.now() - lastRan.current >= delay) { callback(); lastRan.current = Date.now(); } }, delay - (Date.now() - lastRan.current)); return () => { clearTimeout(handler); }; }, [delay, ...deps], ); }; export default useThrottle;
Еще больше крутых хуков вы можете найти в каталоге хуков.const [inputValue, setInputValue] = useState(""); useThrottle(() => { // вызов API }, 500);