可以显著为你提升组件开发和 hooks 开发效率的一系列漂亮（说不定也是才貌双全）的 React hooks。
🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語
React hooks 让我们能把组件的业务逻辑抽象到一个可重用的函数里。
根据到目前为止的使用经验，我们发现：我们创建并在内部项目之间复用的大多数 hooks 通常都有一些共同的写法，涉及回调引用、事件或是组件生命周期。
发现这一点后，我们尝试把这些常用的写法抽出来放进 beautiful-react-hooks —— 一系列 （说不定） 有用的 React hooks —— 来帮助其他公司和专家们加速他们的开发。
此外，我们创建了简明而稳固的 API，时刻牢记代码可阅读性，专注于保持学习曲线越低越好，以便它们可以被更大的团队分享和使用。
-- 请在使用任何 hook 之前读完它的文档！ --
- 简明的 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
我们非常欢迎而且期待着你的开源贡献。
如果想要提交你的自定义 hook，请确保你阅读过这篇 贡献 守则。
在提交一个合并请求 之前，请确保:
- 你已经更新了 package.json 里的版本号，并将你的变更说明放进了 CHANGELOG 文件里。
- 确保你执行过
npm test和npm build再提交你的合并请求。 - 确保你已经写好了你添加的自定义 hook 的文档 （你可以使用HOOK 文档模板 来写你的文档 ）
- 确保你已经更新了
index.d.ts文件，把你的 hook 的类型加进去了。
图标的作者是 Freepik from www.flaticon.com