Решайте задачи на JavaScript0 из 169 задач решено
Перейти к задачам
1361 просмотр
От 17 февраля

Сборник пользовательских хуков на React.js

1

Хук для взаимодействия с клавиатурой

import { useEffect } from 'react' const useKeyListener = (callback) => { useEffect(() => { const listener = (e) => { e = e || window.event const tagName = e.target.localName || e.target.tagName // Принимаем только события на уровне body, // чтобы избежать их перехвата, например, в полях ввода if (tagName.toUpperCase() === 'BODY') { callback(e) } } document.addEventListener('keydown', listener, true) return () => { document.removeEventListener('keydown', listener, true) } }, [callback]) } export default useKeyListener

2

Хук для склонения слов

Хук, который в зависимости от числа подставляет необходимое склонение слова или выражения. Пример использования: const { text } = useWordDeclination(correctAnswersCount, [ "верный ответ", "верных ответа", "верных ответов", ]) Реализация (TypeScript): import { useMemo } from "react" export const useWordDeclination = ( n: number, strings: [string, string, string], ) => { const text = useMemo(() => { const words = [strings[0], strings[1], strings[2]] return words[ n % 100 > 4 && n % 100 < 20 ? 2 : [2, 0, 1, 1, 1, 2][n % 10 < 5 ? n % 10 : 5] ] }, [n, strings]) return { text } }

3

Хук для изменения мета-тегов

Хук, изменяющий title и description мета-тэги для страницы при её открытии и восстанавливающий их значения при ее покидании. Пример использования: usePageMeta({ title, description }) Реализация: import { useEffect } from "react" type Props = { title: string description?: string } const DEFAULT = { title: "Заголовок страницы по умолчанию (заголовок для главной страницы)", description: "Описание по умолчанию (описание для главной страницы)", } export const usePageMeta = ({ title, description }: Props) => { useEffect(() => { document.title = title description && document .querySelector('head meta[name="description"]') ?.setAttribute("content", description) return () => { document.title = DEFAULT.title document .querySelector('head meta[name="description"]') ?.setAttribute("content", DEFAULT.description) } }, [title, description]) }

4

Хук для управления модальным окном

export function useModal() { const [isOpened, setIsOpened] = useState(false); const restrictBodyScroll = () => { document.body.style.height = "100vh"; document.body.style.overflow = "hidden"; }; const allowBodyScroll = () => { document.body.style.height = ""; document.body.style.overflow = ""; }; const open = () => { setTimeout(() => { restrictBodyScroll(); }, 0); setIsOpened(true); }; const close = () => { allowBodyScroll(); setIsOpened(false); }; useEffect(() => { return close; }, []); return { isOpened, open, close, }; } setTimeout в open нужен для того, чтобы скролл body корректно запретился в том случае, если модалка открывается сразу после закрытия предыдущей. Пример использования: const SomeComponent = () => { const confirmModal = useModal(); return ( <div> <button onClick={confirmModal.open}>Открыть модальное окно</button> <SomeModalComponent isOpened={confirmModal.isOpened} close={confirmModal.close} /> </div> ); }; export default SomeComponent;

5

Хук для получения размеров окна

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; };

6

Хук для 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]); };

7

Хук для доступа к предыдущему значению стейта

import { useRef, useEffect } from "react"; const usePrevious = <T>(value: T): T | undefined => { const ref = useRef<T>(); useEffect(() => { ref.current = value; }); return ref.current; }; export default usePrevious; Пример использования: import React, { useState } from "react"; import usePrevious from "./usePrevious"; const Counter = () => { const [count, setCount] = useState(0); const prevCount = usePrevious(count); const handleClick = () => { setCount(count => count + 1); }; return ( <div> Current count: {count}, Previous count: {prevCount} <button onClick={handleClick}>Increment</button> </div> ); }; export default Counter;

Логотип ДевстанцииАвторизуйтесь, чтобы просматривать следующий контент
9

Хук для троттлинга выполнения

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
10

Хук для отложенного выполнения

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
11

Хук для работы с Intersection Observer

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
12

Хук для получения информации о сетевом соединении

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
13

Хук для информации о геолокации в реальном времени

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
14

Хук для преобразования голоса в текст

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
15

Хук для продвинутых жестов на тачпадах

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
16

Хук для отслеживания выделения текста

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
17

Хук для взаимодействия между вкладками

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
18

Хук для работы с Cookie

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
19

Хук для отслеживания размеров элемента

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
20

Хук для работы с localStorage

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
21

Хук для отслеживания активности пользователя

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
22

Хук для отслеживания долгого нажатия

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
23

Хук для копирования в буффер обмена

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
24

Хук для динамической высоты textarea

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
25

Хук для работы с Web Share API

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
Хотите стать частью сообщества Девстанции?
Вступайте в наш чат в Telegram

Также в этой категории

Вопросник
  25 вопросов

Вопросы с собеседований по React.js

Ответы на вопросы для собеседования по React.js

2018 просмотров
От 4 июня

Вам может быть интересно

Викторина
  12 вопросов

Вопросы по CSS Grid и FLEX

То, что могут спросить про CSS Grid и Flex на собеседовании

167 просмотров
От 9 октября 2023
Вопросник
  58 вопросов

60 вопросов с собеседований JavaScript

Вопросы для собеседования JavaScript-разработчика

3767 просмотров
От 4 июня
Викторина
  15 вопросов

Самая типизированная викторина

Викторина по вопросам о TypeScript

374 просмотра
От 9 октября 2023
Задачник
  102 задачи

100 алгоритмических задач по JavaScript

Подборка решений для задач с собеседований по JavaScript

13968 просмотров
От 27 июня
Вопросник
  19 вопросов

Вопросы с собеседований по CSS

Ответы на вопросы про CSS на собеседовании

1370 просмотров
От 4 июня
Викторина
  10 вопросов

Сложные вопросы по HTML

Вопросы про HTML для опытных разработчиков

333 просмотра
От 4 октября 2023

Топ тредов

Gravatar for 1233freddypopa
freddypopa
: Добавить чекбокс, который отвечает за показ ранее тронутых задач (черновик)

Последнее сообщение:
Логотип Девстанции
Девстанция
: Отличная идея! Возьмём её на заметку!
1 сообщение
93 просмотра

Логотип Девстанции
Девстанция
: Предложите идею и получите спонсорский доступ на месяц

Последнее сообщение:
Gravatar for 1236borisops
Borisops
: Добавить темную тему) что бы можно было посмотреть сложность алгоритма и добавить тэги.
10 сообщений
321 просмотр

Gravatar for 815unicozz
unicozz
: Задача в JS под названием "Соревнование" содержит ошибку

Последнее сообщение:
Логотип Девстанции
Девстанция
: Привет! В примерах вызова функции действительно была опечатка, исправили. Однако, должен получиться...
2 сообщения
136 просмотров

Все категории