289 просмотров
От 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. Хук для получения размеров окна

Поддержи проект и получи доступ ко всему контенту всего за 290

6. Хук для setInterval

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290

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

Поддержи проект и получи доступ ко всему контенту всего за 290
Хочешь стать частью сообщества Девстанции?
Вступай в наш чат в Telegram

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

Шпаргалка
  25 вопросов

Шпаргалка по вопросам о React.js

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

439 просмотров
От 30 мая 2023

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

Задачник
  33 задачи

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

Задачи с собеседований на JavaScript с решением

1967 просмотров
От 16 февраля
Викторина
  15 вопросов

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

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

82 просмотра
От 9 октября 2023
Викторина
  32 вопроса

Большой тест по CSS

Большая викторина по вопросам о CSS

40 просмотров
От 2 июня 2023
Шпаргалка
  19 вопросов

Шпаргалка по вопросам о CSS

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

275 просмотров
От 4 октября 2023
Шпаргалка
  21 вопрос

Шпаргалка по вопросам о TypeScript

TypeScript - то, что могут спросить на собеседовании

491 просмотр
От 19 июня 2023
Викторина
  21 вопрос

Промисы, async/await и Event Loop

Вопросы про Promise API, async/await и цикл событий

188 просмотров
От 7 февраля

Топ тредов

Gravatar for 9tokio
Tokio:
то что раньше было бесплатным теперь платное - вот это я понимаю

Последнее сообщение:
Логотип Девстанции
Девстанция:
Спасибо за поддержку проекта :) Повышение качества контента - один из важнейших приоритетов. Этому м...
3 сообщения
212 просмотров

Логотип Девстанции
Девстанция:
Поиск людей для совместной разработки IT-стартапов

Последнее сообщение:
В этом треде пока нет сообщений
0 сообщений
107 просмотров

Логотип Девстанции
Девстанция:
Какой язык программирования выбрать в качестве первого?

Последнее сообщение:
Gravatar for 2kokke
Kokke:
Python или JS - универсально. Но по уму надо бы с чего-то строгого начинать и достаточно низкоуровне...
1 сообщение
139 просмотров

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