React Hooks

Source: https://github.com/rehooks/awesome-react-hooks at 33424d3e810c
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

awesome-react-hooks

Замечательные ресурсы React Hooks

Документация

• Документация React Hooks

Обсуждения

• React Hooks RFC

Учебные материалы

• “Making Sense of React Hooks” by Dan Abramov
• “From React.Component to hooks” by Octave Raimbault
• “React Hooks: What’s going to happen to my tests?” by Kent C. Dodds
• “State Management with React Hooks - No Redux or Context API” by André Gardi
• “How to Fetch Data with React Hooks?” by Robin Wieruch
• Primer on React Hooks
• React Hooks - A deeper dive featuring useContext and useReducer
• “Using Custom React Hooks to Simplify Forms” by James King
• Testing of a Custom React Hook for Fetching Data with Axios
• The Guide to Learning React Hooks (Examples & Tutorials) by Eric Bishard
• “Sanely Testing React Hooks” by Dave Cooper
• React by Example: Hooks

Видео

• 🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov Официальное объявление и первая демонстрация.
• 🎬 ReactConf 2018: 90% Cleaner React by Ryan Florence
• 🎬 React Hooks: A Complete Introduction by Harry Wolff
• 🎬 React Hooks playlist by Ben Awad
• 🎬 React Hooks playlist by Josh Ribakoff
• 🎬 React Hooks playlist by Michael Chan
• 🎬 Custom Hooks in React by Tanner Linsley

Подкасты

• React Hooks - Syntax (Nov 14th, 2018)
• React Hooks 1 Year Later - Syntax (Mar 18, 2020)
• Why should I use React Hooks? - Syntax (Dec 7th, 2020)

Инструменты

• eslint-plugin-react-hooks
• hooks.macro Babel макросы для автоматической инвалидации мемоизации
• CodeSandbox Starter Kit
• React Hooks Snippets for VS Code
• hook-into-props Помощник для создания HOC с использованием hooks. Полезен для использования hooks с компонентами на основе классов.
• react-universal-hooks React Universal Hooks: просто используйте use****** везде, функциональные компоненты или компоненты на основе классов
• Jooks Юнит-тестирование ваших пользовательских hooks путем имитации API Hooks React (useState и т.д.)
• react-hooks-testing-library Библиотека для создания юнит-тестов для пользовательских React hooks.

Каталоги

• @react-hookz/web - Библиотека универсальных React hooks, разработанная с большой тщательностью и учетом совместимости с SSR.
• ahooks Набор React Hooks специально разработанных для корпоративных приложений.
• beautiful-react-hooks(🔥) Набор hooks для ускорения разработки ваших компонентов и пользовательских hooks.
• Captain hook Скромный список hooks.
• crooks Набор уникальных React Hooks.
• hooks-by-example Набор примеров использования hooks из реальной жизни для начинающих.
• Hooks.guide Набор React hooks, отобранный сообществом.
• react-recipes 👩‍🍳 Набор основных рецептов hooks 🥘
• Searchable Collection of React Hooks
• Sunflower(🌻) Набор React Hooks, возвращающих компоненты antd.
• useHooks(🐠) Один новый рецепт React Hook каждый день.
• Use Hooks Набор переиспользуемых React Hooks.

Пакеты

• @21kb/react-hooks Набор React Hooks, чтобы вы на них подсели.
• @d2k/react-devto React hook для запросов API Dev.to
• @d2k/react-github React hook для запросов API Github
• @d2k/react-localstorage React hook, который обновляет и очищает значения localstorage, сохраняя их синхронизацию с вашими компонентами.
• @elgorditosalsero/react-gtm-hook React hook для удобного управления Google Tag Manager.
• @hookstate/core Современное, очень быстрое и расширяемое управление состоянием для React.
• @jzone/react-request-hook 🐶 React hook для пользовательских запросов, совместим с различными библиотеками, поддерживает redux
• @kevinwolf/formal Элегантные примитивы управления формами для эпохи react hooks.
• @koale/useworker ⚙️ Выполнение тяжелых задач в фоне с помощью web workers, без блокировки интерфейса
• @marvelsq/use-properties-hook Функции экземпляра внутри FunctionComponent, как class-properties, и равны в ShallowCompare
• @rehooks/component-size React hook для определения размера компонента.
• @rehooks/document-title React hook для обновления заголовка документа.
• @rehooks/document-visibility React hook для подписки на видимость документа.
• @rehooks/input-value React hook для создания значений входных полей.
• @rehooks/local-storage React hook, который синхронизирует localStorage[key] с компонентом.
• @rehooks/network-status React hook для получения статуса сети.
• @rehooks/online-status React Hook для статуса в сети.
• @rehooks/window-scroll-position React hook для получения позиции x и y окна.
• @rehooks/window-size React hook для подписки на размер окна.
• @rekindle/use-request 🤖 React hook для выполнения запросов.
• @rkrupinski/use-state-machine Hook конечного автомата.
• @staltz/use-profunctor-state React Hook для управления состоянием с Profunctor Optics
• @webscopeio/react-health-check 🏥 Легкий React hook для проверки здоровья сервисов API.
• @wellyshen/use-web-animations 🍿 React hook для высокопроизводительных и манипулируемых анимаций с использованием Web Animations API.
• @withvoid/melting-pot Библиотека утилит React hook.
• ahooks/usetable Прогрессивное решение для сценариев таблиц запросов.
• concent Управление состоянием, адаптированное для react, простое, предсказуемое, прогрессивное и эффективное.
• constate Преобразуйте локальное состояние в глобальное состояние с помощью useContextState и useContextReducer.
• conuse Совместное использование Hook с Context
• easy-peasy Легкое глобальное состояние для React.
• fetch-suspense React hook для Fetch API с поддержкой Suspense.
• graphql-hooks Минималистичный GraphQL клиент, основанный на hooks.
• mobx-react-lite Легкие привязки React для MobX на основе экспериментальных React hooks.
• modali Восхитительный компонент модального диалога для React, построенный с нуля для поддержки React Hooks.
• moment-hooks Библиотека, содержащая универсальные react hooks
• nice-hooks 🍹 Множество приятных hooks для упрощения использования react hooks (callback useState / жизненный цикл / переменная экземпляра)
• promise-hook React hook для упрощения получения данных на основе Promise.
• reactive-react-redux Привязка React Redux с React Hooks и Proxy
• react-async-hook React hook для получения ad-hoc данных в ваши компоненты React.
• react-cached-callback React hooks для кеширования множественных коллбэков по ключу, например в циклах.
• react-context-refs React hooks для получения refs элементов через context.
• react-cookie React hooks для универсальных cookies.
• react-cool-dimensions 📏 React hook для измерения размера элемента и управления адаптивными компонентами.
• react-cool-form 📋 React hooks для состояния и валидации форм, меньше кода больше производительности.
• react-cool-inview 🖥️ React hook для отслеживания входа или выхода элемента из viewport (или другого элемента).
• react-cool-onclickoutside 🖱 React hook для прослушивания кликов вне компонента(ов).
• react-cool-portal 🍒 React hook для Portals, который отображает модали, dropdown, подсказки и т.д. в или где-либо еще.
• react-cool-virtual ♻️ Крошечный React hook для отображения больших наборов данных легко.
• react-countdown-hook Невероятно простой, но мощный hook обратного отсчета для React. На основе requestAnimationFrame.
• react-darkreader 🌓 React Hook для добавления темного / ночного режима на ваш сайт, вдохновленный darkreader.
• react-declare-form Библиотека декларативных форм на основе React hook.
• react-deep-hooks React hooks для непримитивных зависимостей.
• react-dom-status-hook React hook для подписки на событие DOMContentLoaded.
• react-enhanced-reducer-hook Альтернатива useReducer, которая принимает middleware.
• react-fetch-hook React hook для удобного использования Fetch API.
• react-firebase-hooks Набор hooks для использования с Firebase.
• react-form-stateful Библиотека форм. Предоставляет dispatch для расширения библиотеки побочными эффектами.
• react-hanger Небольшой набор утилитарных hooks.
• react-hook-mighty-mouse React hook, который отслеживает события мыши на выбранном элементе 🐭
• react-hook-mousetrap Hook для запуска коллбэков на клавишах или комбинациях клавиш, на основе mousetrap.
• react-hookedup Набор полезных React hooks.
• react-hook-form Валидация форм без хлопот.
• react-hook-layout Управление макетом в React.
• react-hooks-async Пользовательские React hooks для асинхронных функций с отменой и композитностью
• react-hooks-global-state Простое управление глобальным состоянием.
• react-hooks-image-size Hook для получения натурального размера изображения из URL.
• react-hooks-lib Набор переиспользуемых react hooks.
• react-hooks-svgdrawing Hook для svg рисования.
• react-hooks-use-modal Hook для легкого открытия модального окна.
• react-hooks-visible Hook для видимости элемента. Использует Intersection Observer API.
• react-hooks-worker Пользовательские React hooks для web workers
• react-hotkey-hook React hook для горячих клавиш.
• react-i18next Интернационализация для React, как надо.
• react-immer-hooks useState и useReducer с использованием Immer для обновления состояния.
• react-indicative-hooks Hooks обертывающие библиотеку валидации данных называемую Indicative
• react-intersection-visible-hook React hook для отслеживания видимости функционального компонента.
• react-media-hook React hook для Media Queries.
• react-metatags-hook React Hook для управления html мета тегами.
• react-native-react-bridge Плагин React Native для запуска React и управления взаимодействием между ними.
• react-optimistic-ui-hook ⚛️ Минимальная реализация паттерна “оптимистичного UI” с React hook
• react-page-name React Hook для управления заголовком страницы.
• react-peer-data Обертка React для библиотеки PeerData для потоковой передачи файлов и медиа через WebRTC.
• react-pirate Hooks жизненного цикла и утилиты для React.
• react-powerhooks API hooks для компонентов react-powerplug.
• react-promiseful Компонент и hook React для условного отображения дочерних элементов на основе статуса promise.
• react-query Hooks для получения, кеширования и обновления асинхронных данных в React.
• react-recaptcha-hook React hook для google-recaptcha v3
• react-recipes 👩‍🍳 Набор основных рецептов hooks 🥘
• react-request-hook Управляемые, отменяемые и ориентированные на безопасность запросы API.
• react-responsive Модуль media query для React.
• react-rocketjump Управляйте состоянием и побочными эффектами легко.
• react-screen-wake-lock Реализация Screen Wake Lock API на React. Предоставляет способ предотвращения затемнения или блокировки экрана устройства, когда приложение должно продолжать работу
• react-script-hook React hook для динамической загрузки внешнего скрипта и определения момента его загрузки
• react-selector-hooks Набор фабрик мемоизированных селекторов на основе hooks для объявлений вне рендера.
• react-speech-kit Hooks для распознавания речи и синтеза речи в браузере.
• react-state-patterns Пакет утилит для создания переиспользуемых реализаций паттернов React state provider из hooks.
• react-swipeable React hook для обработки событий свайпа.
• react-tracked Простое и быстрое глобальное состояние с React Context. Исключите ненужные повторные рендеры без усилий.
• react-uniformed 🚀 Декларативные формы React с использованием hooks.
• react-use-api Асинхронные данные HTTP запросов для axios. Разработано для разных состояний UI, SSR и предкеширования данных.
• react-use-browser Hook, позволяющий гидратацию на стороне клиента компонентов, отрендеренных на стороне сервера, когда разметка, произведенная сервером, должна отличаться от финальной разметки приложения на стороне клиента.
• react-use-calendar Hook для реализации календаря с событиями.
• react-use-clipboard Hook, который копирует текст в буфер обмена пользователя.
• react-use-d3 React hook для использования D3.
• react-use-data-loader React hook для загрузки данных
• react-use-fetch-factory React hook, который берет на себя получение и выбор данных с redux.
• react-use-fetch-with-redux React hook, который кеширует запросы API и работает с redux.
• react-use-form-state React hook для управления состоянием форм и входных полей.
• react-use-id-hook React hook для генерирования безопасных для SSR уникальных идентификаторов.
• react-use-idb React hook для сохранения значений в браузере с использованием indexDB.
• react-use-infinite-loader :infinity: :page_with_curl: :hourglass_flowing_sand: Супер легкий hook для бесконечной загрузки (scroll) для приложений React
• react-use-input 🎣 Hook, чей setter можно напрямую передать HTML входным полям
• react-use-lazy-load-image :sunrise: :zap: Легко добавьте ленивую загрузку изображений в ваше приложение React
• react-use-message-bar Простой React hook для панелей сообщений.
• react-use-modal React hook для управления модальными окнами.
• react-use-path Самый минимальный маршрутизатор React в стиле hook.
• react-use-scroll-position React hook для использования позиции прокрутки.
• react-use-trigger React hook для запуска эффекта из любого места кода
• react-use-watch React hook, который срабатывает один раз при изменении зависимостей.
• react-use-wavelet React hooks для подключения к платформе умных контрактов Wavelet
• react-use Набор основных hooks.
• react-useFormless React hook для управления состоянием форм.
• react-usemiddleware React hook для использования существующего Redux middleware (как thunk или saga) с useReducer.
• react-useportal 🌀 usePortal, React hook для Portals
• react-user-media Обертка React для navigator.getUserMedia.
• react-wait Hook управления сложным загрузчиком для приложений React.
• react-window-communication-hook React hook для взаимодействия между контекстами браузера (вкладки, окна, iframes).
• react-with-hooks Ponyfill для предлагаемого API React Hooks.
• reaktion Hook похож на useState для управления глобальным состоянием.
• redhooks Управление глобальным состоянием с React Hooks. Также поддерживает использование middleware, как redux-thunk или redux-saga, или вашего собственного пользовательского middleware.
• redux-react-hook React hook для доступа к маппированному состоянию из Redux хранилища.
• region-core Фреймворк управления глобальным состоянием с hook useProps.
• rehooks-visibility-sensor Проверяет, прокручена ли элемент в поле зрения или нет.
• resynced Управление несколькими состояниями с помощью API React Hooks.
• reto Гибкое и эффективное хранилище React с hooks.
• rrh Супер простые React Hooks для react-redux.
• rxjs-hooks Простой способ использования RxJS v6+ с react hooks.
• scroll-data-hook Возвращает информацию о скорости прокрутки, расстоянии, направлении и многом другом.
• style-hook 🎨 писать css в js с react hooks.
• swr Библиотека React Hooks для получения удаленных данных.
• the-platform API браузера, превращенные в React Hooks и дружественные Suspense элементы React для общих ситуаций.
• trousers 👖 Библиотека CSS-in-JS, основанная на hooks, сосредоточенная на семантике и производительности во время выполнения
• use-abortable-fetch React hook, который выполняет fetch и отменяет его, когда компонент выгружается или выполняется другой запрос.
• use-action Почти то же, что useEffect, но не отложено.
• use-as-bind React hook для использования as-bind с WASM источником.
• use-async-memo React hook для генерирования асинхронных мемоизированных данных.
• use-autocomplete React hook для возврата значений автодополнения для поисковой строки в массиве.
• use-axios-react React CRUD hooks для axios, полный список примеров
• use-boolean Удобные помощники для управления булевым состоянием.
• use-browser-history React hook для обработки событий истории браузера.
• use-cart React hook, который дает вам функциональность корзины покупок.
• use-click-away React hook для вызова коллбэка, когда элемент DOM не был нажат.
• use-clippy React hook для чтения и записи в буфер обмена пользователя.
• use-context-selector React useContextSelector hook в пользовательском коде.
• use-controlled-input-number React hook для превращения поведения числового входного поля в то, что вы ожидаете.
• use-countries Пользовательский react hook для списка стран и языков.
• use-debounce Hook дебаунса (и дроссела) для React.
• use-deep-compare Это hooks useEffect/useMemo/useCallback React, за исключением использования глубокого сравнения входных данных.
• use-deep-compare-effect 🐋 Это hook useEffect React, за исключением использования глубокого сравнения входных данных, а не сравнения ссылок.
• use-detect-print React hook для обнаружения, когда страница печатается.
• use-dimensions React Native hook для получения размеров экрана и окна.
• use-double-click React hook для непрерывных двойных кликов и объединения событий клика и двойного клика
• use-eazy-auth React hooks для управления аутентификацией.
• use-events Набор React Hooks для обработки событий мыши.
• use-force-update React hook для принудительного переренда функционального компонента.
• use-hotkeys HotKeys.js React Hook, который слушает события клавиатуры keydown и keyup, определяя и распределяя сочетания клавиш.
• use-hovering Простой, доступный React hook для отслеживания состояния наведения.
• use-http 🐶 useFetch, React hook для выполнения изоморфных http запросов.
• use-immer Hook для использования immer для манипулирования состоянием.
• use-input-file React hook для создания входного поля файла.
• use-is-mounted-ref useIsMountedRef это React Hook для проверки того, смонтирован ли компонент.
• use-lang-direction Hook, который читает значение атрибута dir элемента HTML и любые обновления этого значения, позволяя вам обновлять ваш UI соответственно.
• use-last-fm Hook для отображения в реальном времени вашей текущей проигрываемой песни из Spotify или любого другого сайта, поддерживаемого last.fm. ♪
• use-lilius Headless hook календаря для React.
• use-media CSS media запросы с React hook.
• use-mouse-action React Hooks для прослушивания как событий нажатия/отпускания мыши, так и событий клика с однократно вызываемой функцией.
• use-multiselect Управление состоянием мультивыбора.
• use-overflow React Hook, который позволяет обнаружить переполнение по X и Y
• use-places-autocomplete 📍 React hook для автодополнения мест Google Maps.
• use-popper Обертка React hook вокруг Popper.js.
• use-query-params React Hook для управления состоянием в параметрах запроса URL с легкой сериализацией.
• use-react-modal 🖼 useModal, React hook для модалей/диалогов/лайтбоксов
• use-react-router React Hook для поведения pub-sub с React Router.
• use-reactive-state useReactiveState() - реактивная альтернатива useState() React.
• use-reducer-async React useReducer с асинхронными действиями
• use-redux Hook для привязки redux.
• use-scroller React hook, который автоматически добавляет следующую страницу, избавляя пользователей от полной перезагрузки страницы.
• use-scroll-to-bottom React hook для обнаружения, когда элемент был прокручен до дна.
• use-simple-undo Простая реализация функциональности отмены/повтора.
• server-push-hooks 🔥 React hooks для socket.io, SEE и многое другое
• use-socket.io-client React hook для socket.io-client, манипулируйте клиентом socket.io без побочных эффектов.
• use-sse ✨useSSE - use Server-Side Effect. useEffect как на клиенте, так и на сервере.
• use-ssr ☯️ React hook для определения, находитесь ли вы на сервере, в браузере или на react native.
• use-state-snapshots React hook для отслеживания изменений состояния для функциональности отмены/повтора.
• use-substate React hook для подписки на одно состояние вашего приложения (работает с вашим текущим приложением Redux).
• use-suspender Выполняйте асинхронные действия с React.Suspense
• use-t Многоязычность с использованием hooks.
• use-undo React hook для реализации функций отмены и повтора.
• use-videocard React hook для получения информации о графическом процессоре клиента с использованием canvas
• use-window-blur-change-title React Hook для установки заголовка страницы, когда пользователь переводит фокус с текущего окна.
• useDarkMode Пользовательский React Hook для помощи в реализации компонента “темного режима”.
• useDeferredState React hook для отсрочки изменения состояния. Это необходимо, когда ваш UI должен дождаться завершения анимации исчезновения, чтобы демонтировать компонент.
• useDropZone React hook, который позволяет вам установить простую функциональность drag and drop.
• useEmailAutocomplete 📬 React hook для входных полей автодополнения электронной почты.
• useFileDialog Откройте диалог выбора файлов без борьбы с входным полем файла, используя React hook useFileDialog
• useInView Реализация React API Intersection Observer, чтобы сказать вам, когда элемент входит или выходит из viewport.
• useIsTyping Hook для проверки, печатает ли пользователь в textarea или input
• useKeyCapture ⌨️ Простой hook для упрощения прослушивания событий keyDown.
• usePosition React hook для получения позиции top left элемента.
• useReducerWithEffects React Hook, который объединяет reducer и побочные эффекты
• useReducerWithLocalStorage React hook, который добавляет поддержку локального хранилища к hook useReducer
• useScreenType Определение типа размера экрана для сетки Bootstrap 4.
• useScreenType React hook для динамического получения текущего типа экрана (мобильный, планшет, рабочий стол) с поддержкой настраиваемых точек останова.
• useScrollSpy React hook для автоматического обновления навигации на основе позиции прокрутки.
• useServiceWorker React hook, который может зарегистрировать service worker
• useValueAfter Очень простой React hook для легкого предоставления различных props компоненту (удобно для тестирования граничных случаев)
• useWaitForElements Простой hook для ожидания отображения элементов с MutationObserver.
• useWindowOrientation Hook, возвращающий ориентацию окна (книжная или альбомная) на основе текущих размеров окна
• useWindowWidthBreakpoints Hook для использования точек останова ширины окна (вдохновленные Bootstrap)