Zbiór pięknych (i mamy nadzieję, że użytecznych) hooków React, mających na celu przyspieszenie tworzenia spersonalizowanych hooków oraz komponentów.
🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語
W aplikacji React hooki pozwalają na wyodrębnienie logiki biznesowej komponentów do pojedyńczych funkcji wielokrotnego użytku.
Odkryliśmy, że większość hooków, które stworzyliśmy i dzieliliśmy między naszymi wewnętrznymi projektami, miały zazwyczaj podobną istotę,
obejmującą callbacki, eventy oraz cykle zycia komponentów.
Z tego powodu podjęliśmy próbę zebrania tej istoty pod postacią beautiful-react-hooks będących zbiorem (* mamy nadzieję *) przydatnych
hooków React, mającym na celu pomoc innym firmom i specjalistom w przyspieszeniu procesu tworzenia aplikacji.
Ponadto, stworzyliśmy zwięzłe i konkretne API, mając na uwadze czytelność kodu oraz pragnąc utrzymać krzywą uczenia się na jak najniższym
poziomie, tak, aby można je było wykorzystywać i dzielić się nim w większych zespołach.
-- Przeczytaj dokumentację kadego z hooków przed jego użyciem! --
- Zwarte API
- Małe i lekkie
- Łatwe do nauki
używając npm:
$ npm install beautiful-react-hooksużywając 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
Współpraca jest bardzo mile widziana.
Przed dodaniem nowego hooka zapoznaj się koniecznie z zasadami projektowymi tutaj CONTRIBUTING
Przed stworzeniem nowego pull request, upewnij się, że:
- uaktualniłeś wersję pliku package.json oraz dodałeś zmiany w pliku CHANGELOG
- użyłeś komend
npm testoraznpm build. - dodałeś dokumentację do twojego nowego hooka (możesz użyć szablon HOOK_DOCUMENTATION_TEMPLATE).
- uaktualniłeś plik
index.d.tsdodając typy Typescript twojego hooka.
Ikona wykonana przez Freepik na www.flaticon.com