Gathering detailed insights and metrics for beautiful-react-hooks
Gathering detailed insights and metrics for beautiful-react-hooks
🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
Installations
npm install beautiful-react-hooksDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, ESM
Node Version
18.14.2
NPM Version
8.19.4
Releases
60
Languages
3
JavaScript
TypeScript
Shell
JavaScript (51.38%)
TypeScript (48.54%)
Shell (0.07%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
8,352 Stars
615 Commits
585 Forks
69 Watchers
2 Branches
58 Contributors
Updated on Jul 18, 2025
Maintainers
1
Package Meta Information
Latest Version
5.0.3
Package Id
beautiful-react-hooks@5.0.3
Unpacked Size
335.14 kB
Size
112.67 kB
File Count
229
NPM Version
8.19.4
Node Version
18.14.2
Published on
Mar 12, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
4
Dev Dependencies
50
@ant-design/icons@babel/core@babel/preset-env@babel/preset-react@babel/register@semantic-release/changelog@semantic-release/commit-analyzer@semantic-release/exec@semantic-release/git@semantic-release/github@semantic-release/npm@testing-library/react@testing-library/react-hooks@types/lodash.debounce@types/lodash.throttle@types/react-router-domantdbabel-loaderbabel-plugin-istanbulbabel-plugin-transform-require-ignorechaicss-loadereslinteslint-config-standard-with-typescripteslint-plugin-importeslint-plugin-neslint-plugin-promiseeslint-plugin-reactglobhuskyjsdoc-to-markdownjsdomjsdom-globalmochamock-local-storagemutation-observernycreactreact-domreact-router-domreact-styleguidistregenerator-runtimerxjssemantic-releasesinonstyle-loaderts-loadertypescripturl-loaderwebpack
A collection of tailor-made React hooks to enhance your development process and make it faster.
🇬🇧 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
🕺 Install
by using npm:
1$ npm install beautiful-react-hooks
by using yarn:
1$ yarn add beautiful-react-hooks
Basic usage
importing a hooks is as easy as the following straightforward line:
1import 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
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
- make sure to write tests for your code, run
npm testandnpm buildbefore submitting your merge request. - 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
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE.txt:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.txt:0
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/ci.yml:13
Reason
Found 7/14 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/branch-tests.yml:1
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch-tests.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/antonioru/beautiful-react-hooks/branch-tests.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch-tests.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/antonioru/beautiful-react-hooks/branch-tests.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/antonioru/beautiful-react-hooks/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/antonioru/beautiful-react-hooks/ci.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/antonioru/beautiful-react-hooks/ci.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/antonioru/beautiful-react-hooks/ci.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/branch-tests.yml:23
- Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:25
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
- Info: 0 out of 2 npmCommand dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 23 are checked with a SAST tool
Score
4.7
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More