Gathering detailed insights and metrics for beautiful-react-hooks
Gathering detailed insights and metrics for beautiful-react-hooks
Installations
npm install beautiful-react-hooksDeveloper
Developer Guide
BETA
Module System
CommonJS, ESM
Min. Node Version
Typescript Support
No
Node Version
18.14.2
NPM Version
8.19.4
Statistics
8,239 Stars
603 Commits
580 Forks
70 Watching
3 Branches
54 Contributors
Updated on 28 Nov 2024
Languages
JavaScript (51.13%)
TypeScript (48.79%)
Shell (0.07%)
Total Downloads
Cumulative downloads
Total Downloads
5,510,953
Last day
24.9%
11,081
Compared to previous day
Last week
-1.9%
45,977
Compared to previous week
Last month
-3.6%
198,664
Compared to previous month
Last year
8.7%
1,814,933
Compared to previous year
Daily Downloads
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
Versions
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
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
0 existing vulnerabilities detected
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/ci.yml:13
Reason
Found 6/15 approved changesets -- score normalized to 4
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
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
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
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
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 22 are checked with a SAST tool
Score
4.6
/10
Last Scanned on 2024-11-25
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