Geliştirme sürecinizi hızlandırmak ve daha verimli hale getirmek için özel olarak hazırlanmış React hooklar koleksiyonu.
🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 | 🇹🇷 Türkçe
Özel React hooklar, geliştiricilere bileşenlerin iş mantığını tek, yeniden kullanılabilir işlevlere soyutlama imkanı sağlar.
Oluşturduğum ve projeler arasında paylaştığım birçok hookun geri çağrıları, referansları, etkinlikleri ve bileşen yaşam döngüsü ile ilgili olduğunu fark ettim.
Bu nedenle beautiful-react-hooks, adlı, diğer geliştiricilerin geliştirme süreçlerini hızlandırmalarına yardımcı olabilecek kullanışlı React hooks koleksiyonunu oluşturdum.
Ayrıca, kod okunabilirliğini vurgulayan, öğrenme eğrisini mümkün olduğunca düşük tutarak daha büyük ekiplerin kullanımı ve paylaşımı için uygun hale getiren özlü ve pratik bir API oluşturmayı amaçladım.
-- Lütfen herhangi bir hook'u kullanmadan önce belgesini okuyun! --
- Sade API
- Hafif ve küçük
- Öğrenmesi kolay
npm kullanıyorsanız:
$ npm install beautiful-react-hooksyarn kullanıyorsanız:
$ yarn add beautiful-react-hooksİstediğiniz özel hook'u aşağıdaki şekilde import ederek kolayca kullanabilirsin.:
import useSomeHook from "beautiful-react-hooks/useSomeHook";- 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
- useUnmount
- useUpdateEffect
- useIsFirstRender
- useMutationObserver
- useAudio
- useObjectState
- useToggle
- useQueryParam
- useQueryParams
- useSearchQuery
- useURLSearchParams
Bazı hooklar üçüncü taraf kütüphaneleri kullanarak oluşturulur (örneğin rxjs, react-router-dom, redux gibi). Bu nedenle, bu kütüphaneleri eş bağımlılıklar olarak listelenmiş olarak göreceksiniz.
Eğer bu hookları doğrudan kullanmıyorsanız, bu bağımlılıkları yüklemeniz gerekmez
Katkıda bulunmak hoş görülür ve istenir.
Özel hook'unuzu göndermeden önce CONTRIBUTING yönergelerini tamamen okuduğunuzdan ve anladığınızdan emin olun.
Pull isteğini göndermeden önce: Lütfen aşağıdakilere dikkat edin
- Kodunuz için testler yazmayı unutmayın ve çekme isteğinizi göndermeden önce
npm testvenpm buildkomutlarını çalıştırın. - Eğer özel bir hook oluşturuyorsanız, lütfen özel hook'unuzu belgelediğinizden emin olun (Özel hook'unuzu belgelemek için HOOK_DOCUMENTATION_TEMPLATE bu dökümanı kullanabilirsiniz.).
Simge Freepik tarafından www.flaticon.com adresinden oluşturuldu.