コンポーネントやフック開発を高速化するための、美しい（できれば便利な） React フックのコレクションです。
🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語
React のカスタムフックは抽象的なコンポーネントのビジネスロジックを単一な再利用可能な関数とする事が出来ます。
これまでのところ、私たちが作成し、内部で共有されているフックの大半はかなりの頻度でコールバック参照、イベントとコンポーネントのライフサイクルに関して類似する点がある事が分かっています。
この理由から、私たちはそれらの知見を企業や専門家が開発プロセスをスピードアップするのに役立つ（できれば）便利な React フックのコレクションとして beautiful-react-hooks にまとめました。
さらに、コードの読みやすさを考慮して、簡潔かつ具体的な API を作成しました。 より大きなチームで使用し、共有できるように、学習曲線を可能な限り低く抑える事が可能です。
-- フックを利用する前に、ドキュメントを確認して下さい！ --
- 簡潔な API
- 軽量
- 学習が容易
npm を利用する場合:
$ npm install beautiful-react-hooksyarn を利用する場合:
$ 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
いくつかのフックはサードパーティライブラリ(rxjs、react-router-dom、redux)の上に構築されているため、それらのライブラリが peer dependencies としてリストされていることに気づくかもしれません。直接的にそれらのフックを使用しない限り、依存関係としてインストールする必要はありません。
このリポジトリへの貢献は大歓迎ですし、必要としています。
あなたが作成したカスタムフックの PR を送るにあたり、私たちの CONTRIBUTING ガイドラインを必ず確認するようにしてください。
PR を送る前に、下記を確認してください:
- コードのテストを必ず書くようにし、PR を送る前に
npm testとnpm buildを実行して問題がない事を確認してください。 - カスタムフックを作成する場合には、ドキュメントに必ず追加するようにしてください。
(カスタムフックのドキュメントテンプレートを用意しています HOOK_DOCUMENTATION_TEMPLATE).
アイコンは www.flaticon.com で Freepik によって作成されました。