Колекція красивих (також надіємось що корисних) Реакт хуків, для прискорення розробки ваших компонентів та хуків.
🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語
Кастомні Реакт хуки дозволяють абстрагувати бізнес логіку компонентів в окремі функції багаторазового використання.
Досі, ми зауважили, що більшість хуків які ми створили і після цього поширили між нашими внутрішніми проектами, досить часто мають
аналогічну суть, що включають в себе виклик колбек функцій, подій та життєвих циклів компонентів.
З цієї причини, ми спробували реалізувати цю суть в beautiful-react-hooks: колекцію (сподіваємось) корисних Реакт хуків, для того щоб
допомогти іншим компаніям та професіоналам пришвидшити їхній процес розробки.
Крім того, ми створили лаконічний, але конкретний API, з точки зору читабельності коду, маючи на меті тримати криву вивчення настільки
низькою, наскільки це можливо, тому це може бути використано та поширено у великих командах.
-- Будь-ласка, перед використанням будь-яких хуків, прочитайте їхню документацію! --
- Лаконічний API
- Малий розмір та легкість
- Простий у вивченні
Використовуючи npm:
$ npm install beautiful-react-hooksВикористовуючи yarn:
$ yarn add beautiful-react-hooks- useMutableState
- useInfiniteScroll
- useObservable
- useEvent
- useGlobalEvent
- usePreviousValue
- useValueHistory
- useValidatedState
- useMediaQuery
- useOnlineState
- useViewportSpy
- useViewportState
- useSpeechRecognition and useSpeechSynthesis
- useGeolocation, useGeolocationState and useGeolocationEvents
- useDrag, useDropZone and useDragEvents
- useMouse, useMouseState and useMouseEvents
- useTouch, useTouchState and useTouchEvents
- useLifecycle, useDidMount and useWillUnmount
- useWindowResize
- useWindowScroll
- useRequestAnimationFrame
- useResizeObserver
- useTimeout
- useInterval
- useDebouncedCallback
- useThrottledCallback
- useLocalStorage
- useSessionStorage
- useDefaultedState
- useRenderInfo
- useSwipe, useHorizontalSwipe and useVerticalSwipe
- useSwipeEvents
- useConditionalTimeout
- useCookie
- useDarkMode
- useUpdateEffect
- useIsFirstRender
- useMutationObserver
- useAudio
- useObjectState
- useToggle
- useQueryParam
- useQueryParams
- useSearchQuery
- useURLSearchParams
Ваші внески в проект дуже вітаються та потрібні.
Але для подання ваших кастомних хуків, переконайтесь що ви ознайомились з нашим гайдом для ВНЕСКІВ.
Перед поданням нового merge реквесту, будь-ласка переконайтеся:
- Ви оновили версію package.json і повідомили про свої зміни в CHANGELOG файлі
- Переконайтеся, що ви запустили
npm testіnpm buildперед поданням вашого merge реквесту. - Переконайтеся що ви додали документацію ваших кастомних хуків(ви також можете використовувати HOOK_DOCUMENTATION_TEMPLATE для документації кастомних хуків).
- Переконайтеся що ви оновили
index.d.tsфайл з вашими типами хуків.
Зображення надано Freepik з www.flaticon.com