beautiful-react-hooks

5.0.2last stable release 10 months ago
Complexity Score
Medium
Open Issues
10
Dependent Projects
22
Weekly Downloadsglobal
59,734

License

  • MIT
    • Yesattribution
    • Permissivelinking
    • Permissivedistribution
    • Permissivemodification
    • Nopatent grant
    • Yesprivate use
    • Permissivesublicensing
    • Notrademark grant

Downloads

Readme


A collection of tailor-made React hooks to enhance your development process and make it faster.

๐ŸŒŸ Hooks Playground ๐ŸŒŸ

๐Ÿ‡ฌ๐Ÿ‡ง English | ๐Ÿ‡จ๐Ÿ‡ณ ็ฎ€ไฝ“ไธญๆ–‡ | ๐Ÿ‡ฎ๐Ÿ‡น Italiano | ๐Ÿ‡ช๐Ÿ‡ธ Espaรฑol | ๐Ÿ‡บ๐Ÿ‡ฆ Ukrainian | ๐Ÿ‡ง๐Ÿ‡ท Brazilian Portuguese | ๐Ÿ‡ต๐Ÿ‡ฑ Polski | ๐Ÿ‡ฏ๐Ÿ‡ต ๆ—ฅๆœฌ่ชž | ๐Ÿ‡น๐Ÿ‡ท Tรผrkรงe

๐Ÿ’ก Why?

Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.
I have noticed that many of the hooks I have created and shared across projects involve callbacks, references, events, and dealing with the component lifecycle.
Therefore, I have created beautiful-react-hooks, a collection of useful React hooks that may help other developers speed up their development process.
Moreover, I have strived to create a concise and practical API that emphasizes code readability, while keeping the learning curve as low as possible, making it suitable for larger teams to use and share t โ€“ Please before using any hook, read its documentation! โ€“

โ˜•๏ธ Features

  • Concise API
  • Small and lightweight
  • Easy to learn

๐ŸŒŸ Hooks Playground ๐ŸŒŸ

๐Ÿ•บ Install

by using npm:

$ npm install beautiful-react-hooks

by using yarn:

$ yarn add beautiful-react-hooks

Basic usage

importing a hooks is as easy as the following straightforward line:

import useSomeHook from 'beautiful-react-hooks/useSomeHook'

๐ŸŽจ 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
  • useUnmount
  • useUpdateEffect
  • useIsFirstRender
  • useMutationObserver
  • useAudio
  • useObjectState
  • useToggle
  • useQueryParam
  • useQueryParams
  • useSearchQuery
  • useURLSearchParams

๐ŸŒŸ Hooks Playground ๐ŸŒŸ

Peer dependencies

Some hooks are built using third-party libraries (such as rxjs, react-router-dom, redux). As a result, you will see these libraries listed as peer dependencies.
Unless you are using these hooks directly, you need not install these dependencies.

Contributing

Contributions are very welcome and wanted.

To submit your custom hook, make sure you have thoroughly read and understood the CONTRIBUTING guidelines.

Prior to submitting your pull request: please take note of the following

  1. make sure to write tests for your code, run npm test and npm build before submitting your merge request.
  2. in case youโ€™re creating a custom hook, make sure youโ€™ve added the documentation (you may use the HOOK_DOCUMENTATION_TEMPLATE to document your custom hook).

Credits

Icon made by Freepik from www.flaticon.com

Dependencies

Loading dependencies...

CVE IssuesActive
0
Scorecards Score
4.60
Test Coverage
70.00%
Follows Semver
Yes
Github Stars
8,233
Dependenciestotal
52
DependenciesOutdated
34
DependenciesDeprecated
1
Threat Modelling
No
Repo Audits
No

Learn how to distribute beautiful-react-hooks in your own private NPM registry

npm config set registry  https://npm.cloudsmith.com/owner/repo
Processing...
Done
npm install beautiful-react-hooks
Processing...
Done

132 Releases

NPM on Cloudsmith

Getting started with NPM on Cloudsmith is fast and easy.