Showing preview only (533K chars total). Download the full file or copy to clipboard to get everything.
Repository: antonioru/beautiful-react-hooks
Branch: master
Commit: ee987048b0c1
Files: 259
Total size: 480.4 KB
Directory structure:
gitextract_vvbbjhwk/
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── tests_checker.yml
│ └── workflows/
│ ├── branch-tests.yml
│ └── ci.yml
├── .gitignore
├── .huskyrc
├── .mocharc.json
├── .npmrc
├── .nycrc
├── .releaserc.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── HOOK_DOCUMENTATION_TEMPLATE.md
├── LICENSE.txt
├── README.md
├── babel.config.js
├── docs/
│ ├── Installation.md
│ ├── Introduction.md
│ ├── README.es-ES.md
│ ├── README.it-IT.md
│ ├── README.jp-JP.md
│ ├── README.pl-PL.md
│ ├── README.pt-BR.md
│ ├── README.tr-TR.md
│ ├── README.uk-UA.md
│ ├── README.zh-CN.md
│ ├── useAudio.md
│ ├── useConditionalTimeout.md
│ ├── useCookie.md
│ ├── useDarkMode.md
│ ├── useDebouncedCallback.md
│ ├── useDefaultedState.md
│ ├── useDidMount.md
│ ├── useDrag.md
│ ├── useDragEvents.md
│ ├── useDropZone.md
│ ├── useEvent.md
│ ├── useGeolocation.md
│ ├── useGeolocationEvents.md
│ ├── useGeolocationState.md
│ ├── useGlobalEvent.md
│ ├── useHorizontalSwipe.md
│ ├── useInfiniteScroll.md
│ ├── useInterval.md
│ ├── useIsFirstRender.md
│ ├── useLifecycle.md
│ ├── useLocalStorage.md
│ ├── useLongPress.md
│ ├── useMediaQuery.md
│ ├── useMouse.md
│ ├── useMouseEvents.md
│ ├── useMouseState.md
│ ├── useMutableState.md
│ ├── useMutationObserver.md
│ ├── useObjectState.md
│ ├── useObservable.md
│ ├── useOnlineState.md
│ ├── usePreviousValue.md
│ ├── useQueryParam.md
│ ├── useQueryParams.md
│ ├── useRenderInfo.md
│ ├── useRequestAnimationFrame.md
│ ├── useResizeObserver.md
│ ├── useSearchQuery.md
│ ├── useSessionStorage.md
│ ├── useSpeechRecognition.md
│ ├── useSpeechSynthesis.md
│ ├── useSwipe.md
│ ├── useSwipeEvents.md
│ ├── useSystemVoices.md
│ ├── useThrottledCallback.md
│ ├── useTimeout.md
│ ├── useToggle.md
│ ├── useTouch.md
│ ├── useTouchEvents.md
│ ├── useTouchState.md
│ ├── useURLSearchParams.md
│ ├── useUnmount.md
│ ├── useUpdateEffect.md
│ ├── useValidatedState.md
│ ├── useValueHistory.md
│ ├── useVerticalSwipe.md
│ ├── useViewportSpy.md
│ ├── useViewportState.md
│ ├── useWillUnmount.md
│ ├── useWindowResize.md
│ ├── useWindowScroll.md
│ └── utils/
│ ├── _CustomLogo.js
│ ├── _EmptyComponent.js
│ ├── _custom.css
│ ├── _setup.js
│ └── _styleguidist.theme.js
├── package.json
├── scripts/
│ ├── commit-version.sh
│ ├── generate-doc-append-types.js
│ ├── generate-exports.js
│ └── update-version.js
├── src/
│ ├── factory/
│ │ ├── createHandlerSetter.ts
│ │ └── createStorageHook.ts
│ ├── shared/
│ │ ├── geolocationUtils.ts
│ │ ├── isAPISupported.ts
│ │ ├── isClient.ts
│ │ ├── isDevelopment.ts
│ │ ├── isFunction.ts
│ │ ├── noop.ts
│ │ ├── safeHasOwnProperty.ts
│ │ ├── safelyParseJson.ts
│ │ ├── swipeUtils.ts
│ │ ├── types.ts
│ │ └── warnOnce.ts
│ ├── useAudio.ts
│ ├── useConditionalTimeout.ts
│ ├── useCookie.ts
│ ├── useDarkMode.ts
│ ├── useDebouncedCallback.ts
│ ├── useDefaultedState.ts
│ ├── useDidMount.ts
│ ├── useDrag.ts
│ ├── useDragEvents.ts
│ ├── useDropZone.ts
│ ├── useEvent.ts
│ ├── useGeolocation.ts
│ ├── useGeolocationEvents.ts
│ ├── useGeolocationState.ts
│ ├── useGlobalEvent.ts
│ ├── useHorizontalSwipe.ts
│ ├── useInfiniteScroll.ts
│ ├── useInterval.ts
│ ├── useIsFirstRender.ts
│ ├── useLifecycle.ts
│ ├── useLocalStorage.ts
│ ├── useLongPress.ts
│ ├── useMediaQuery.ts
│ ├── useMouse.ts
│ ├── useMouseEvents.ts
│ ├── useMouseState.ts
│ ├── useMutableState.ts
│ ├── useMutationObserver.ts
│ ├── useObjectState.ts
│ ├── useObservable.ts
│ ├── useOnlineState.ts
│ ├── usePreviousValue.ts
│ ├── useQueryParam.ts
│ ├── useQueryParams.ts
│ ├── useRenderInfo.ts
│ ├── useRequestAnimationFrame.ts
│ ├── useResizeObserver.ts
│ ├── useSearchQuery.ts
│ ├── useSessionStorage.ts
│ ├── useSpeechRecognition.ts
│ ├── useSpeechSynthesis.ts
│ ├── useSwipe.ts
│ ├── useSwipeEvents.ts
│ ├── useSystemVoices.ts
│ ├── useThrottledCallback.ts
│ ├── useTimeout.ts
│ ├── useToggle.ts
│ ├── useTouch.ts
│ ├── useTouchEvents.ts
│ ├── useTouchState.ts
│ ├── useURLSearchParams.ts
│ ├── useUnmount.ts
│ ├── useUpdateEffect.ts
│ ├── useValidatedState.ts
│ ├── useValueHistory.ts
│ ├── useVerticalSwipe.ts
│ ├── useViewportSpy.ts
│ ├── useViewportState.ts
│ ├── useWillUnmount.ts
│ ├── useWindowResize.ts
│ └── useWindowScroll.ts
├── styleguide.config.js
├── test/
│ ├── _setup.js
│ ├── geolocationUtils.spec.js
│ ├── isAPISupported.spec.js
│ ├── isClient.spec.js
│ ├── mocks/
│ │ ├── AudioApi.mock.js
│ │ ├── CookieStoreApi.mock.js
│ │ ├── GeoLocationApi.mock.js
│ │ ├── IntersectionObserver.mock.js
│ │ ├── MatchMediaQueryList.mock.js
│ │ ├── ResizeObserver.mock.js
│ │ ├── SpeechSynthesis.mock.js
│ │ └── SpeechSynthesisUtterance.mock.js
│ ├── safeHasOwnProperty.spec.js
│ ├── useAudio.spec.js
│ ├── useConditionalTimeout.spec.js
│ ├── useCookie.spec.js
│ ├── useDarkMode.spec.js
│ ├── useDebouncedCallback.spec.js
│ ├── useDefaultedState.spec.js
│ ├── useDidMount.spec.js
│ ├── useDrag.spec.js
│ ├── useDragEvents.spec.js
│ ├── useDropZone.spec.js
│ ├── useEvent.spec.js
│ ├── useGeolocation.spec.js
│ ├── useGeolocationEvents.spec.js
│ ├── useGeolocationState.spec.js
│ ├── useGlobalEvent.spec.js
│ ├── useHandlerSetter.spec.js
│ ├── useInfiniteScroll.spec.js
│ ├── useInterval.spec.js
│ ├── useIsFirstRender.spec.js
│ ├── useLifecycle.spec.js
│ ├── useLocalStorage.spec.js
│ ├── useLongPress.spec.js
│ ├── useMediaQuery.spec.js
│ ├── useMouse.spec.js
│ ├── useMouseEvents.spec.js
│ ├── useMouseState.spec.js
│ ├── useMutableState.spec.js
│ ├── useMutationObserver.spec.js
│ ├── useObjectState.spec.js
│ ├── useObservable.spec.js
│ ├── useOnlineState.spec.js
│ ├── usePreviousValue.spec.js
│ ├── useQueryParam.spec.js
│ ├── useQueryParams.spec.js
│ ├── useRenderInfo.spec.js
│ ├── useRequestAnimationFrame.spec.js
│ ├── useResizeObserver.spec.js
│ ├── useSearchQuery.spec.js
│ ├── useSessionStorage.spec.js
│ ├── useSpeechRecognition.spec.js
│ ├── useSpeechSynthesis.spec.js
│ ├── useStorage.spec.js
│ ├── useSwipe.spec.js
│ ├── useSwipeEvents.spec.js
│ ├── useSystemVoices.spec.js
│ ├── useThrottledCallback.spec.js
│ ├── useTimeout.spec.js
│ ├── useToggle.spec.js
│ ├── useTouchEvents.spec.js
│ ├── useTouchState.spec.js
│ ├── useURLSearchParams.spec.js
│ ├── useUnmount.spec.js
│ ├── useUpdateEffect.spec.js
│ ├── useValidatedState.spec.js
│ ├── useValueHistory.spec.js
│ ├── useViewportSpy.spec.js
│ ├── useViewportState.spec.js
│ ├── useWillUnmount.spec.js
│ ├── useWindowResize.spec.js
│ ├── useWindowScroll.spec.js
│ ├── utils/
│ │ ├── ReactRouterWrapper.js
│ │ ├── assertFunction.js
│ │ ├── assertHook.js
│ │ └── promiseDelay.js
│ └── warnOnce.spec.js
├── tsconfig.cjs.json
├── tsconfig.esm.json
├── tsconfig.json
└── tsconfig.types.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintignore
================================================
/dist
/docs
/test
/docs
================================================
FILE: .eslintrc.js
================================================
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:react/recommended',
'standard-with-typescript'
],
parserOptions: {
project: './tsconfig.json',
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'react'
],
rules: {
'max-len': [
'error',
{
code: 140
}
],
semi: [
2,
'never'
],
'@typescript-eslint/semi': 'off',
'linebreak-style': 'off',
'object-curly-newline': 'off',
'react/jsx-filename-extension': 'off',
'import/no-named-as-default': 'off',
'import/no-named-as-default-member': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/strict-boolean-expressions': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-invalid-void-type': 'off'
},
overrides: [
{
files: [
'*.test.js',
'*.spec.js',
'*.test.jsx',
'*.spec.jsx'
],
globals: {
expect: 'readonly',
should: 'readonly',
sinon: 'readonly'
},
rules: {
'no-unused-expressions': 'off'
}
}
]
}
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--- Provide a general summary of your changes in the Title above -->
## Description
<!--- Describe your changes in detail -->
## Related Issue
<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps to reproduce -->
<!--- Please link to the issue here: -->
## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->
## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran to -->
<!--- see how your change affects other areas of the code, etc. -->
## Screenshots (if appropriate):
================================================
FILE: .github/tests_checker.yml
================================================
comment: 'Hello, thank you for contributing! It looks like your PR introduces new code that has not been tested, please make to add some tests as soon as you can.',
fileExtensions: ['.ts', '.js']
testDir: 'test'
================================================
FILE: .github/workflows/branch-tests.yml
================================================
name: Tests
on:
push:
branches-ignore:
- master
pull_request:
branches-ignore:
- master
jobs:
test:
if: "!contains(github.event.head_commit.message, 'skip ci')"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18.14
- run: npm install
- run: npm run lint
- run: npm run build
- run: npm test
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI/CD
env:
CI: true
on:
push:
branches: [ master ]
paths-ignore:
- 'docs/**'
- '*.md'
jobs:
ci-cd:
if: "!contains(github.event.head_commit.message, 'skip ci')"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18.14
registry-url: https://registry.npmjs.org/
- name: NPM Install
run: npm install
- name: Build
run: npm run build
- name: Tests (with coverage)
run: npm test -- --coverage
- name: Coveralls GitHub Action
uses: coverallsapp/github-action@v2
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
- name: Build website (Github pages)
run: npm run build-doc --if-present
- name: Publish website on GitHub Pages
uses: crazy-max/ghaction-github-pages@v3
with:
build_dir: dist-ghpages
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Prepare distribution
run: |
node scripts/generate-exports.js
cp package.json README.md LICENSE.txt CHANGELOG.md CONTRIBUTING.md CODE_OF_CONDUCT.md ./dist
- name: Publish
run: |
npm pack
npx semantic-release
working-directory: ./dist
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .gitignore
================================================
################ NODE.JS
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# next.js build output
.next
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
################ VISUAL STUDIO CODE
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
################ LINUX
*~
# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*
# KDE directory preferences
.directory
# Linux trash folder which might appear on any partition or disk
.Trash-*
# .nfs files are created when an open file is removed but is still being accessed
.nfs*
################ MAC OS
# General
.DS_Store
.AppleDouble
.LSOverride
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
################ WINDOWS
# Windows thumbnail cache files
Thumbs.db
ehthumbs.db
ehthumbs_vista.db
# Dump file
*.stackdump
# Folder styleguidist file
[Dd]esktop.ini
# Recycle Bin used on file shares
$RECYCLE.BIN/
# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp
# Windows shortcuts
*.lnk
################ JETBRAINS
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
# User-specific stuff
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/dictionaries
.idea/**/shelf
# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml
# Gradle
.idea/**/gradle.xml
.idea/**/libraries
# CMake
cmake-build-debug/
cmake-build-release/
# Mongo Explorer plugin
.idea/**/mongoSettings.xml
# File-based project format
*.iws
# IntelliJ
out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Cursive Clojure plugin
.idea/replstate.xml
# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties
# Editor-based Rest Client
.idea/httpRequests
################ SUBLIME TEXT
# Cache files for Sublime Text
*.tmlanguage.cache
*.tmPreferences.cache
*.stTheme.cache
# Workspace files are user-specific
*.sublime-workspace
# Project files should be checked into the repository, unless a significant
# proportion of contributors will probably not be using Sublime Text
# *.sublime-project
# SFTP configuration file
sftp-config.json
# Package control specific files
Package Control.last-run
Package Control.ca-list
Package Control.ca-bundle
Package Control.system-ca-bundle
Package Control.cache/
Package Control.ca-certs/
Package Control.merged-ca-bundle
Package Control.user-ca-bundle
oscrypto-ca-bundle.crt
bh_unicode_properties.cache
# Sublime-github package stores a github token in this file
# https://packagecontrol.io/packages/sublime-github
GitHub.sublime-settings
.idea/
dist/
dist-ghpages/
coverage.lcov
## as it is intended for projects not libraries
yarn.lock
package-lock.json
================================================
FILE: .huskyrc
================================================
{
"hooks": {
"pre-commit": "npm run lint"
}
}
================================================
FILE: .mocharc.json
================================================
{
"require": [
"jsdom-global/register",
"@babel/register",
"regenerator-runtime/runtime",
"mock-local-storage",
"./test/_setup.js"
]
}
================================================
FILE: .npmrc
================================================
save-exact=true
================================================
FILE: .nycrc
================================================
{
"all": true,
"reporter": ["lcov"],
"check-coverage": true,
"extension": [ ".js" ],
"include": [ "dist/*.js" ],
"exclude": [ "dist/index.js", "dist/_virtual/**/*.js" ],
"branches": 50,
"lines": 80,
"functions": 70,
"statements": 70
}
================================================
FILE: .releaserc.json
================================================
{
"branches": [
"master"
],
"tagFormat": "v${version}",
"plugins": [
"@semantic-release/commit-analyzer",
[
"@semantic-release/exec",
{
"successCmd": "node ../scripts/update-version.js ${nextRelease.version} && node ../scripts/generate-exports.js && sh ../scripts/commit-version.sh ${nextRelease.version}"
}
],
"@semantic-release/npm",
"@semantic-release/changelog",
[
"@semantic-release/git",
{
"assets": [
"../package.json"
],
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
}
],
"@semantic-release/github"
]
}
================================================
FILE: CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
## [0.1.0] - 2019-12-18
### Added
- Create package.json
- Setup .gitignore
- Add a CHANGELOG.md
- Add a Readme.md and a Contributing.md
- Add Styleguidist
- Add ESLint
- Add Stylelint
- Tests
- Build System
- useCallbackRef hook & tests
- useDidMount hook & tests
- useWillUnmount hook & tests
- useLifecycle hook & tests
- useWindowResize hook & tests
- Auto-generating documentation script
## [0.2.0] - 2019-12-20
### Added
- useDebouncedFn hook & tests
## [0.3.0] - 2019-12-21
### Added
- useMouseEvents hook & tests
- useMouseState hook & tests
- useMouse hook & tests
## [0.3.1] - 2019-12-23
### Fixed
- Adding babel-plugin-istanbul to solve [this issue with istanbul/nyc](https://github.com/istanbuljs/nyc/issues/706)
## [0.4.0] - 2019-12-23
### Added
- Adding playground build as a gitpages website
- Adding better documentation
## [0.5.0] - 2019-12-24
### Added
- useInterval hook & tests
- useTimeout hook & tests
## [0.5.1] - 2019-12-24
### Fixed
- Build workflow performs tests twice
## [0.6.0] - 2019-12-24
### Added
- useThrottledFn hook & tests
- debounce and throttle utilities
## [0.7.0] - 2019-12-24
### Added
- useWindowScroll hook & tests
## [0.8.0] - 2019-12-28
### Added
- useGlobalEvent hook & tests
## [0.8.1] - 2019-12-28
### Fixed
- Few documentation typos
## [0.8.2] - 2019-12-28
### Fixed
- Few documentation typos
- README image
### Added
- Types support
## [0.8.3] - 2019-12-28
### Fixed
- Few documentation typos
## [0.9.0] - 2019-12-29
### Fixed
- usePreviousValue hook & tests
## [0.9.1] - 2019-12-29
### Fixed
- peerDependencies
- build was missing
- usePreviousValue types were missing
## [0.9.2] - 2019-12-29
### Fixed
- React & ReactDom moved to `devDependencies`
## [0.9.3] - 2019-12-29
### Fixed
- Package name for public usage
## [0.10.0] - 2019-12-30
### Added
- Code of conduct
- Contributing guidelines
- issue template
- pull request template
## [0.10.1] - 2019-12-30
### Fixed
- correct package.json version
- dependencies update
## [0.11.0] - 2019-12-30
### Added
- Rewriting `useMouseHandler` into `useMouseEvents`
### Fixed
- documentation typos
## [0.11.1] - 2019-12-31
### Fixed
- documentation typos
## [0.12.0] - 2019-12-31
### Added
- useGeolocationEvents hook & tests
- useGeolocationState hook & tests
- useGeolocation hook & tests
## [0.13.0] - 2020-01-02
### Added
- useMediaQuery hook & tests
- change the order of the listed hooks into the Readme.md file
### Fixed
- `useOnMount` renamed to `useDidMount`
## [0.13.1] - 2020-01-02
### Fixed
- Usage example image
## [0.13.2] - 2020-01-02
### Fixed
- improved `useCallbackRef` documentation
- changed lib logo
## [0.13.3] - 2020-01-05
### Fixed
- removed wrong `useCallbackRef` dependencies
- dependency check on other event related hooks
## [0.13.4] - 2020-01-06
### Fixed
- Switching CI to Travis
## [0.13.5] - 2020-01-06
### Fixed
- useTimeout refactory
## [0.13.6] - 2020-01-07
### Fixed
- few hooks refactory
- Improved documentation by a better use of Styleguidist
- Improved types
## [0.13.7] - 2020-01-07
### Fixed
- `usePrev` renamed to `usePreviousValue`
## [0.13.8] - 2020-01-09
### Fixed
- Fix on `usePreviousValue` type
## [0.13.9] - 2020-01-09
### Fixed
- Fixing CI
## [0.14.0] - 2020-01-10
### Added
- useValueHistory hook & tests
## [0.15.0] - 2020-01-10
### Added
- useOnlineState hook
## [0.16.0] - 2020-01-10
### Added
- Repository ownership changed from `antonioru` to `beautifulinteractions`
## [0.17.0] - 2020-01-10
### Added
- useViewportSpy hook & tests
- Improved documentation
## [0.17.1] - 2020-01-10
### Fixed
- types reference into package.json
## [0.17.2] - 2020-01-12
### Fixed
- Fixed license in package.json
## [0.18.0] - 2020-01-13
### Added
- useDragEvents hook & tests
- useDrag hook
### Fixed
- event handlers uses the right parameters and avoid using (...args)
- `useCallbackRef` has been reverted to an internal utility
## [0.18.1] - 2020-01-14
### Fixed
- Build removed from the source package
## [0.18.2] - 2020-01-20
### Fixed
- useOnlineState returns true when the device does not support the `online/offline` state assuming the app is already online
- Improved test
## [0.19.0] - 2020-01-21
### Added
- useConditionalTimeout hook & tests
### Fixed
- adding react and react-dom as dev-dependencies
## [0.19.1] - 2020-01-21
### Fixed
- adding types for useConditionalTimeout
## [0.19.2] - 2020-01-22
### Fixed
- Updated typings for cancelable functions. Updated docs.
## [0.19.3] - 2020-01-25
### Added
- Support windows. Add .npmrc for saving exact version of dependencies
## [0.19.4] - 2020-01-25
### Fixed
- Updating dependencies
- Improving documentation by using `beautiful-react-ui` components
## [0.20.0] - 2020-01-27
### Added
- useValidatedState hook & tests
## [0.20.1] - 2020-01-27
### Fixed
- Adding useValidatedState into README.md
- Rewriting README.md
- Moved beautiful-react-ui from dependencies to dev-dependencies
## [0.21.0] - 2020-02-17
### Added
- useRequestAnimationFrame hook & tests
## [0.21.1] - 2020-02-20
### Fixed
- Fix isSupported when window is not defined to allow SSR
## [0.22.0] - 2020-02-21
### Added
- useLocalStorage hook & tests & docs & types
## [0.22.1] - 2020-02-21
### Fixed
- improving SSR check and window.* check before usage
- adding SSR warning to `useRequestAnimationFrame`
- improving `useLocalStorage` documentation
## [0.22.2] - 2020-02-21
### Fixed
- dependencies update
## [0.22.3] - 2020-03-11
### Added
- Adding Chinese translation of README.md
## [0.22.4] - 2020-03-11
### Fixed
- Fixing missing links between README.md files
## [0.22.5] - 2020-03-12
### Added
- Adding Italian translation of README.md
## [0.22.6] - 2020-03-12
### Fixed
- Fixing missing image links in italian Readme.md
## [0.22.7] - 2020-03-12
### Fixed
- Adding Spanish translation of README.md
## [0.22.8] - 2020-03-14
### Fixed
- Adding Ukranian translation of README.md
## [0.22.9] - 2020-03-14
### Fixed
- Fixing package version
## [0.22.10] - 2020-03-17
### Fixed
- Adding Polish translation of README.md
## [0.22.11] - 2020-03-17
### Fixed
- Fixing Polish translation of README.md
## [0.22.12] - 2020-03-17
### Fixed
- Fixing links to hooks in language specific README files
## [0.23.0] - 2020-03-17
### Added
- useDropZone hook & tests
## [0.23.1] - 2020-03-18
### Fixed
- Fixing links in Contributing section and minor typos in language specific README files
## [0.24.0] - 2020-03-26
### Added
- useStorage hook & tests
## [0.24.1] - 2020-05-09
### Fixed
- adding SSR warning to `useLocalStorage` hook
- adding warning to `useLocalStorage` hook if `localStorage` is not in `window` object
- adding new test for `useLocalStorage` hook that checks that `localStorage` in `window` object
## [0.25.0] - 2020-05-09
### Changed
- Improved build system by removing gulp and introducing rollup
- tests directory from `src` to `tests`
- Dependencies updated
## [0.25.1] - 2020-05-10
### Changed
- Tests improved by running them from the dist folder
## [0.25.2] - 2020-05-12
### Changed
- Fixed double `npm run build-doc` script run before deploy
## [0.25.3] - 2020-06-16
### Fixed
- Type declaration fix for `useDebouncedFn` and `useThrottledFn`
## [0.25.4] - 2020-06-16
### Fixed
- useInterval, clear the previous interval when the milliseconds value changes.
## [0.25.5] - 2020-06-17
### Fixed
- Introducing ESModules build
## [0.25.6] - 2020-07-03
### Fixed
- `module` property added to `package.jsoin` to support ESModules
## [0.26.0] - 2020-07-06
### Added
- useSessionStorage hook & documentation
- useStorage refactory
- useStorage types refactory
## [0.27.0] - 2020-07-06
### Added
- useResizeObserver hook & documentation
## [0.27.1] - 2020-07-08
### Fixed
- useStorage throws an error on server side rendering as the window object is not defined yet
## [0.27.2] - 2020-07-16
### Fixed
- useInterval clear function is now correctly used as useEffect cleanup
- Rollup configuration `preserveModules` bug
## [0.27.3] - 2020-08-12
### Fixed
- useTimeout clear function is now correctly used as useEffect cleanup
- CI minor issues
## [0.27.4] - 2020-08-15
### Added
- `useValueHistory` can now be used with distinct history
### Fixed
- dependencies update
- CI minor issues
## [0.28.0] - 2020-08-15
### Added
- `useDefaultedState` hook and tests
## [0.29.0] - 2020-08-31
### Added
- `useObservable` hook and tests
### Fixed
- CI minor issues
## [0.30.0] - 2020-09-04
### Added
- `useSystemVoices` hook and tests
- `useSpeechSynthesis` hook and tests
## [0.30.1] - 2020-09-11
### Fixed
- `useLocalStoreage` types fix
## [0.30.2] - 2020-09-27
### Added
- Better dist package
## [0.30.3] - 2020-09-27
### Fixed
- CI bugfix
## [0.30.4] - 2020-09-27
### Fixed
- Wrong path settings in package.json causes the library to be empty
## [0.30.5] - 2020-09-27
### Fixed
- Wrong CI settings causes the library to be empty
## [0.30.6] - 2020-10-09
### Fixed
- Webpack 5 error with the `isDevelopment` constant
## [0.31.0] - 2020-10-09
### Added
- `useRenderInfo` hook and tests
## [0.31.1] - 2020-10-09
### Added
- Support for SSR in `isAPISupport`
### Fixed
- Documentation link
## [0.32.0] - 2021-05-06
### Added
- `useTouchEvents`, `useTouchState` hook
- `useSwipe`, `useHorizontalSwipe` and `useVerticalSwipe` hook
### Fixed
- `useMouseEvents` flaws
- improved docs
### Removed
- `useConditionalTimeout` hook
## [0.32.1] - 2021-05-07
### Fixed
- `useSwipe` typings
### Removed
- `useConditionalTimeout` hook
## [0.33.0] - 2021-05-08
### Added
- `useSwipeEvents` hook
### Fixed
- typings module
## [0.33.1] - 2021-05-09
### Fixed
- `useSwipe` types
## [0.33.2] - 2021-05-09
### Fixed
- converted `HandlerSetter` type to better generic type
## [0.33.3] - 2021-05-09
### Fixed
- `useSwipeEvents` swipe performing only once in the same direction
## [0.33.4] - 2021-05-09
### Fixed
- `HandlerSetter` types a function taking another function as parameter
## [0.33.5] - 2021-05-12
### Fixed
- index exports `useHorizontalSwipe` and `useVerticalSwipe`
## [0.34.0] - 2021-05-12
### Added
- `useSwipeEvents` exports `onSwipeMove`
### Fixed
- `useMediaQuery` addEventListener bug
## [0.34.1] - 2021-05-12
### Fixed
- removed useless console.log from `useSwipe`
## [0.35.0] - 2021-05-12
### Added
- `useSwipeEvents` exports`onSwipeEnd`,`onSwipeStart`
## [1.0.0] - 2021-08-27
### Change
- Complete typescript rewrite
## [1.0.1] - 2021-08-27
### Fixed
- Changing to the handler function do not cause the handler setter refs to update
## [1.0.2] - 2021-10-06
### Fixed
- Updating useGlobalEvent ref to the provided function
## [1.0.3] - 2022-01-26
### Fixed
- Updating useValueHistory's misuse of Array.prototype.filter to update history.current
## [1.0.4] - 2022-01-27
### Fixed
- Type definitions on useResizeObserver
## [1.0.5] - 2022-01-27
### Fixed
- Refs are typed as RefObject<T>, which is more correct as they are React-managed refs.
## [1.0.6] - 2022-01-27
### Fixed
- `useDebouncedFn` and `useThrottledFn` refs
## [1.2.0] - 2022-01-27
### Added
- rewriting `useDebouncedFn` and `useThrottledFn` as `useDebouncedCallback` and `useThrottledCallback`
- `useDebouncedCallback` and `useThrottledCallback` improvements
## [1.2.1] - 2022-02-14
### Fixed
- Reverted rewrite of `useDebouncedFn` and `useThrottledFn`, as they were breaking changes. Will release those as `2.0.0`.
## [2.0.0] - 2022-05-05
### Added
- rewriting `useDebouncedFn` and `useThrottledFn` as `useDebouncedCallback` and `useThrottledCallback` - BREAKING CHANGE
- `useDebouncedCallback` and `useThrottledCallback` improvements
## [2.0.1] - 2022-06-11
### Fixed
- fixes useConditionalTimeout clearing function
## [2.1.0] - 2022-06-11
### Added
- introduces `useInfiniteScroll`
## [3.0.0] - 2022-06-12
### Added
- rewrite of useEvent and useGlobalEvent as well as the hooks using those
## [3.1.0] - 2022-06-13
### Added
- introduces `useViewportState`
## [3.1.1] - 2022-06-13
### fixes
- fix(release): updates release process and changelog
## [3.1.2] - 2022-06-13
Errored release
## [3.1.3] - 2022-06-13
Errored release
## [3.1.4] - 2022-06-14
### Fixes
- Fixes CI, semantic-release
## [3.1.5] - 2022-06-14
### Fixes
- fix(useQueryParam): revert to version 5 of react-router-dom
## [3.1.6] - 2022-06-14
### Fixes
- useQueryParams, adds support for param deletion
## [3.2.0] - 2022-06-14
### Adds
- useQueryParams, adds support for param deletion
## [3.2.1] - 2022-06-14
### Fixes
- useQueryParams types
## [3.2.2] - 2022-06-14
### Fixes
- CI
## [3.3.0] - 2022-06-14
### Fixes
- feat(useQueryParams): adds useQueryParams
## [3.3.0] - 2022-06-20
### Adds
- feat(useQueryParams): adds useQueryParams
## [3.3.1] - 2022-06-20
### Fixes
- useQueryParams and useQueryParam state bugs
## [3.4.0] - 2022-06-22
### Adds
- feat(timeouts): increase the general timeout/delay value
## [3.5.0] - 2022-06-23
### Added
- feat(hook): introduces useURLSearchParams
## [3.5.1] - 2022-06-25
### Fixes
- error handling for useStorage hook
- add more types for useStorage hook, fix bug where storage wasn't being set on initial render
## [3.5.2] - 2022-06-27
### Fixes
- wrap setValue from useStorage hook in useCallback to persist reference
## [3.5.2] - 2022-06-27
### Fixes
- wrap setValue from useSt
## [3.6.0] - 2022-06-27
### Adds
- useCookie hook
## [3.6.1] - 2022-06-27
### Fixes
- wraps useStorage's setValue in a useCallback hook
## [3.6.2] - 2022-06-28
### Fixes
- useTimeout return type
## [3.7.0] - 2022-07-08
### Fixes
- moves type checking functions into a separate utility
## [3.7.1] - 2022-08-09
### Fixes
- allow user to pass 'passive' flag events-related hooks
## [3.8.0] - 2022-08-09
### Adds
- Improves 'passive' events flag
## [3.9.0] - 2022-08-09
### Adds
- useAudio hook
## [3.10.0] - 2022-08-09
### Adds
- useDarkMode hook
## [3.11.0] - 2022-08-19
### Adds
- useToggle hook
## [3.11.1] - 2022-08-19
### Fixes
- useToggle types
## [3.11.2] - 2023-01-11
### Fix
- `warnOnce` function to make sure the warning messages are displayed only once
## [3.12.0] - 2023-01-11
### Adds
- improve `useInfiniteScroll` code
## [3.12.1] - 2023-01-11
### Fixes
- Fixes `useInfiniteScroll` not working on Windows machines
## [3.12.2] - 2023-01-11
### Fixes
- Fixes `useInfiniteScroll` console.error message
## [3.12.3] - 2023-02-16
### Fixes
- `useLocalStorage` and `useSessionStorage` no longer return a new `setValue` function everytime `setValue` is called
## [4.0.0] - 2023-03-13
### Breaking Changes
- Removes `index.ts` file from `src` folder
- Updates dependencies
- Improves documentation
- Improves types
## [4.1.0] - 2023-03-13
### Adds
- `useMutableState` hook
## [4.1.1] - 2023-03-13
### Fixes
- wrong dependency in package.json
## [4.2.0] - 2023-03-18
### Adds
- `useLongPress` hook
### Fixes
- Deprecated GitHub actions version
## [4.2.1] - 2023-03-18
### Fixes
- package.json specifiers (exports)
## [4.3.0] - 2023-03-19
### Adds
- `useSpeechRecognition` hook
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
* Focusing on what is best not just for us as individuals, but for the overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders via the contact from at [Beautiful Interactions website](https://www.beautifulinteractions.com/). All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the reporter of any incident.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to this library
First of all, thanks for taking the time to contribute! 😬
The following is a set of guidelines for contributing to this library, these are mostly guidelines, not rules.
Use your best judgment, and feel free to propose changes to this document in a pull request.
#### Table Of Contents
[Code of Conduct](#code-of-conduct)
[How Can I Contribute?](#how-can-i-contribute)
* [Reporting Bugs](#reporting-bugs)
* [Suggesting Enhancements](#suggesting-enhancements)
* [Your First Code Contribution](#your-first-code-contribution)
* [Pull Requests](#pull-requests)
[Styleguides](#styleguides)
* [Git Commit Messages](#git-commit-messages)
[Additional Notes](#additional-notes)
* [Issue and Pull Request Labels](#issue-and-pull-request-labels)
## Code of Conduct
This project and everyone participating in it is governed by the [Project Code of Conduct](./CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.
## How Can I Contribute?
### Reporting Bugs
This section guides you through submitting a bug report for this library.
Following these guidelines helps maintainers and the community understand your report, reproduce the behavior and find related reports.
Before creating bug reports, please check [this list](#before-submitting-a-bug-report) as you might find out that you don't need to create one.
When you are creating a bug report, please [include as many details as possible](#how-do-i-submit-a-good-bug-report).
> **Note:** If you find a **Closed** issue that seems like it is the same thing that you're experiencing, open a new issue and include a link to the original issue in the body of your new one.
#### Before Submitting A Bug Report
* Perform a search to see if the problem has already been reported. If it has **and the issue is still open**, add a comment to the existing issue instead of opening a new one.
#### How Do I Submit A (Good) Bug Report?
Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/).
Explain the problem and include additional details to help maintainers reproduce the problem:
* **Use a clear and descriptive title** for the issue to identify the problem.
* **Describe the exact steps which reproduce the problem** in as many details as possible. When listing steps, **don't just say what you did, but explain how you did it**. For example, if you moved the cursor to the end of a line, explain if you used the mouse or a keyboard shortcut and if so which one?
* **Provide specific examples to demonstrate the steps**. Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets in the issue, use Markdown code blocks.
* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior.
* **Explain which behavior you expected to see instead and why.**
* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux.
* **If the problem wasn't triggered by a specific action**, describe what you were doing before the problem happened and share more information using the guidelines below.
Provide more context by answering these questions:
* **Where were you using the library and what for?** Please provide detailed information on the project where you were using the library and how you were using it.
* **Can you reliably reproduce the issue?** If not, provide details about how often the problem happens and under which conditions it normally happens.
Include details about your Browser and environment:
* **Which Browser and which version are you using?**
### Suggesting Enhancements
This section guides you through submitting an enhancement suggestion for this library, including completely new features and minor improvements to existing functionality.
Following these guidelines helps maintainers and the community understand your suggestion and find related suggestions.
Before creating enhancement suggestions, please check [this list](#before-submitting-an-enhancement-suggestion) as you might find out that you don't need to create one. When you are creating an enhancement suggestion, please [include as many details as possible](#how-do-i-submit-a-good-enhancement-suggestion).
#### Before Submitting An Enhancement Suggestion
* **Check if there's already a feature which provides that enhancement.**
* **Perform a search to see if the enhancement has already been suggested.** If it has, add a comment to the existing issue instead of opening a new one.
#### How Do I Submit A (Good) Enhancement Suggestion?
Enhancement suggestions are tracked as [GitHub issues](https://guides.github.com/features/issues/).
Create an issue on that repository and provide the following information:
* **Use a clear and descriptive title** for the issue to identify the suggestion.
* **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
* **Provide specific examples to demonstrate the steps**. Include copy/pasteable snippets which you use in those examples, as Markdown code blocks.
* **Describe the current behavior** and **explain which behavior you expected to see instead** and why.
* **Include screenshots and animated GIFs** which help you demonstrate the steps. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux.
* **Explain why this enhancement would be useful** to this library users.
### Your First Code Contribution
Unsure where to begin contributing to this library?
You can start by looking through these `beginner` and `help-wanted` issues:
* [Beginner issues][beginner] - issues which should only require a few lines of code, and a test or two.
* [Help wanted issues][help-wanted] - issues which should be a bit more involved than `beginner` issues.
Both issue lists are sorted by total number of comments. While not perfect, number of comments is a reasonable proxy for impact a given change will have.
#### Local development
This library can be developed locally. For instructions on how to do this, check the [README file](README.md)
### Pull Requests
The process described here has several goals:
- Maintain a good code quality
- Fix problems that are important to users
- Engage the community in working toward the best possible version of this library
- Enable a sustainable system for maintainers to review contributions
Please follow these steps to have your contribution considered by the maintainers:
1. Follow all instructions in [the template](.github/PULL_REQUEST_TEMPLATE.md)
2. Follow the [styleguides](#styleguides)
3. After you submit your pull request, verify that all [status checks](https://help.github.com/articles/about-status-checks/) are passing. <details><summary>What if the status checks are failing?</summary>If a status check is failing, and you believe that the failure is unrelated to your change, please leave a comment on the pull request explaining why you believe the failure is unrelated. A maintainer will re-run the status check for you. If we conclude that the failure was a false positive, then we will open an issue to track that problem with our status check suite.</details>
While the prerequisites above must be satisfied prior to having your pull request reviewed, the reviewer(s) may ask you to complete additional design work, tests, or other changes before your pull request can be ultimately accepted.
## Styleguides
### Git Commit Messages
* Use the present tense ("Add feature" not "Added feature")
* Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
* Limit the first line to 72 characters or less
* Reference issues and pull requests liberally after the first line
* When only changing documentation, include `[ci skip]` in the commit title
* Consider starting the commit message with an applicable emoji:
* :art: `:art:` when improving the format/structure of the code
* :racehorse: `:racehorse:` when improving performance
* :non-potable_water: `:non-potable_water:` when plugging memory leaks
* :memo: `:memo:` when writing docs
* :penguin: `:penguin:` when fixing something on Linux
* :apple: `:apple:` when fixing something on macOS
* :checkered_flag: `:checkered_flag:` when fixing something on Windows
* :bug: `:bug:` when fixing a bug
* :fire: `:fire:` when removing code or files
* :green_heart: `:green_heart:` when fixing the CI build
* :white_check_mark: `:white_check_mark:` when adding tests
* :lock: `:lock:` when dealing with security
* :arrow_up: `:arrow_up:` when upgrading dependencies
* :arrow_down: `:arrow_down:` when downgrading dependencies
* :shirt: `:shirt:` when removing linter warnings
## Additional Notes
When contributing to this repository, please first discuss the change you wish to make via issue,
email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct, please follow it in all your interactions with the project.
## Pull Request Process
Here's a quick check list for a good pull request (PR):
1. Ensure any install or build dependencies are removed before the end of the layer when doing a
build.
2. Update the CHANGELOG.md with details of changes to the interface, this includes new environment
variables, exposed ports, useful file locations and container parameters.
3. Increase the version numbers in any examples files and the README.md to the new version that this
Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
4. Keep PRs as tidy as possible. If need be, please use
`git reset --soft <hash>`, `git commit -m "..."` and `git push -f` to
compact your commits into a single one and rewrite the history of your branch.
5. One feature/change per PR
6. GITLAB issue number in commit comment
7. No changes to code not directly related to your change (e.g. no formatting changes or refactoring to existing code)
8. All tests in testsuite pass
9. Do a rebase on upstream master
10. PR needs to be accompanied with tests that sufficiently test added/changed functionality
================================================
FILE: HOOK_DOCUMENTATION_TEMPLATE.md
================================================
# useYourHookName
A hook that [...]
### 💡 Why?
- why this hook is necessary and what it does
### Basic Usage:
```jsx harmony
import { yourHook } from 'beautiful-react-hooks';
const YourExample = () => {
/* Your code goes here */
return null;
};
<YourExample />
```
### Use cases
description of the use case
```jsx harmony
import { yourHook } from 'beautiful-react-hooks';
const YourUseCase = () => {
/* Your code goes here */
return null;
};
<YourUseCase />
```
### Mastering the hooks
#### ✅ When to use
- When it's good to use
#### 🛑 When not to use
- When it's not good to use
<!-- Types -->
================================================
FILE: LICENSE.txt
================================================
MIT License
Copyright (c) 2019 Antonio Russo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="./logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
A collection of tailor-made React hooks to enhance your development process and make it faster.
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Hooks Playground 🌟
</a>
</p>
</div>
🇬🇧 English | <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">🇨🇳 简体中文</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">🇮🇹 Italiano</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> 🇪🇸 Español </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">🇺🇦 Ukrainian</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">🇧🇷 Brazilian Portuguese</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">🇵🇱 Polski </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">🇯🇵 日本語 </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.tr-TR.md">🇹🇷 Türkçe</a>
## 💡 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](https://beta.reactjs.org/reference/react) 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
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Hooks Playground 🌟
</a>
</p>
</div>
## 🕺 Install
by using `npm`:
```bash
$ npm install beautiful-react-hooks
```
by using `yarn`:
```bash
$ yarn add beautiful-react-hooks
```
## Basic usage
importing a hooks is as easy as the following straightforward line:
```ts static
import useSomeHook from 'beautiful-react-hooks/useSomeHook'
```
## 🎨 Hooks
* [useMutableState](docs/useMutableState.md)
* [useInfiniteScroll](docs/useInfiniteScroll.md)
* [useObservable](docs/useObservable.md)
* [useEvent](docs/useEvent.md)
* [useGlobalEvent](docs/useGlobalEvent.md)
* [usePreviousValue](docs/usePreviousValue.md)
* [useValueHistory](docs/useValueHistory.md)
* [useValidatedState](docs/useValidatedState.md)
* [useMediaQuery](docs/useMediaQuery.md)
* [useOnlineState](docs/useOnlineState.md)
* [useViewportSpy](docs/useViewportSpy.md)
* [useViewportState](docs/useViewportState.md)
* [useSpeechRecognition](docs/useSpeechRecognition.md) and [useSpeechSynthesis](docs/useSpeechSynthesis.md)
* [useGeolocation](docs/useGeolocation.md), [useGeolocationState](docs/useGeolocationState.md)
and [useGeolocationEvents](docs/useGeolocationEvents.md)
* [useDrag](docs/useDrag.md), [useDropZone](docs/useDropZone.md) and [useDragEvents](docs/useDragEvents.md)
* [useMouse](docs/useMouse.md), [useMouseState](docs/useMouseState.md) and [useMouseEvents](docs/useMouseEvents.md)
* [useTouch](docs/useTouch.md), [useTouchState](docs/useTouchState.md) and [useTouchEvents](docs/useTouchEvents.md)
* [useLifecycle](docs/useLifecycle.md), [useDidMount](docs/useDidMount.md) and [useWillUnmount](docs/useWillUnmount.md)
* [useWindowResize](docs/useWindowResize.md)
* [useWindowScroll](docs/useWindowScroll.md)
* [useRequestAnimationFrame](docs/useRequestAnimationFrame.md)
* [useResizeObserver](docs/useResizeObserver.md)
* [useTimeout](docs/useTimeout.md)
* [useInterval](docs/useInterval.md)
* [useDebouncedCallback](docs/useDebouncedCallback.md)
* [useThrottledCallback](docs/useThrottledCallback.md)
* [useLocalStorage](docs/useLocalStorage.md)
* [useSessionStorage](docs/useSessionStorage.md)
* [useDefaultedState](docs/useDefaultedState.md)
* [useRenderInfo](docs/useRenderInfo.md)
* [useSwipe](docs/useSwipe.md), [useHorizontalSwipe](docs/useHorizontalSwipe.md) and [useVerticalSwipe](docs/useVerticalSwipe.md)
* [useSwipeEvents](docs/useSwipeEvents.md)
* [useConditionalTimeout](docs/useConditionalTimeout.md)
* [useCookie](docs/useCookie.md)
* [useDarkMode](docs/useDarkMode.md)
* [useUnmount](docs/useUnmount.md)
* [useUpdateEffect](docs/useUpdateEffect.md)
* [useIsFirstRender](docs/useIsFirstRender.md)
* [useMutationObserver](docs/useMutationObserver.md)
* [useAudio](docs/useAudio.md)
* [useObjectState](docs/useObjectState.md)
* [useToggle](docs/useToggle.md)
* [useQueryParam](docs/useQueryParam.md)
* [useQueryParams](docs/useQueryParams.md)
* [useSearchQuery](docs/useSearchQuery.md)
* [useURLSearchParams](docs/useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Hooks Playground 🌟
</a>
</p>
</div>
## 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](./CONTRIBUTING.md) 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](./HOOK_DOCUMENTATION_TEMPLATE.md) to document your custom hook*).
## Credits
Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: ['@babel/react', '@babel/env']
}
================================================
FILE: docs/Installation.md
================================================
# Getting started
Using `npm`:
```bash
$ npm i --save beautiful-react-hooks
```
Using `yarn`:
```bash
$ yarn add beautiful-react-hooks
```
then just import any hook described by the documentation in your React component file:
```ts static
import useSomeHook from 'beautiful-react-hoks/useSomeHook'
```
**Please note**: always import your hook from the library as a single module to avoid importing unnecessary hooks and therefore unnecessary
dependencies
## Peer dependencies
Some hooks are built on top of third-party libraries (rxjs, react-router-dom, redux), therefore you will notice those libraries listed as
peer dependencies. You don't have to install these dependencies unless you directly use those hooks.
## Working with Refs in TypeScript
The documentation of this module is written in JavaScript, so you will see a lot of this:
```jsx static
import { ref } from 'react';
const myCustomHook = () => {
const ref = useRef()
/* your code */
return ref;
}
```
If you are in a TypeScript project, you should declare your ref as a `RefObject<T extends HTMLElement>`. For example:
```ts static
import { ref } from 'react';
const myCustomHook = () => {
const ref = useRef<HTMLDivElement>(null);
/* your code */
return ref;
}
```
See [here](https://dev.to/wojciechmatuszewski/mutable-and-immutable-useref-semantics-with-react-typescript-30c9) for information on the
difference between a `MutableRefObject` and a `RefObject`.
================================================
FILE: docs/Introduction.md
================================================
# Introduction
[](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks)
[](https://opensource.org/licenses/MIT)
`beautiful-react-hooks` is a collection of tailor-made [React hooks](https://beta.reactjs.org/reference/react) to enhance your development
process and make it faster.
## 💡 Why?
Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.<br />
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. <br />
Therefore, I have created `beautiful-react-hooks`, a collection of useful [React hooks](https://beta.reactjs.org/reference/react) that may
help other developers speed up their development process.<br/>
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
## ☕️ Features
* Concise API
* Small and lightweight
* Easy to learn
## Basic usage
importing a hooks is as easy as the following straightforward line:
```ts static
import useSomeHook from 'beautiful-react-hooks/useSomeHook'
```
## 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.
================================================
FILE: docs/README.es-ES.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="../logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
Una colección de hermosos (y ojalá que útiles) hooks de React para acelerar tu desarrollo de componentes y hooks
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟Para probar clic aquí🌟
</a>
</p>
</div>
<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/">🇬🇧 English</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">🇨🇳 简体中文</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">🇮🇹 Italiano</a> | 🇪🇸 Español
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">🇺🇦 Ukrainian</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">🇧🇷 Brazilian Portuguese</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">🇵🇱 Polski </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">🇯🇵 日本語 </a>
## 💡 Por qué?
React custom hooks permite abstraer la lógica de negocio de los componentes en funciones únicas reutilizables.<br />
Hasta ahora hemos notado que la mayoría de los hooks que hemos creado y compartido en nuestros proyectos tienen un núcleo bastante similar,
un núcleo que a menudo implica los mismos patrones de desarrollo (llamadas, referencias y ciclos de vida). <br />
Por esta razón hemos tratado de resumir esa esencia en `beautiful-react-hooks`:una colección de (*esperamos*) útiles Para que React hooks
sirva otras empresas y profesionales ayudando a acelerar su proceso de desarrollo.<br /><br />
Además, creamos un API conciso pero concreto teniendo en cuenta la legibilidad del código, centrándonos en mantener la curva de aprendizaje
lo más baja posible para que pueda ser usada y compartida en equipos más grandes.
**-- Por favor, antes de utilizar un hook, leer su documentación! --**
## ☕️ Características
* API Consistente.
* Pequeña y ligera.
* Fácil de aprender.
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Para probar clic aquí 🌟
</a>
</p>
</div>
## 🕺 Instalar
Usando `npm`:
```bash
$ npm install beautiful-react-hooks
```
Usando `yarn`:
```bash
$ yarn add beautiful-react-hooks
```
## 🎨 Hooks
* [useMutableState](useMutableState.md)
* [useInfiniteScroll](useInfiniteScroll.md)
* [useObservable](useObservable.md)
* [useEvent](useEvent.md)
* [useGlobalEvent](useGlobalEvent.md)
* [usePreviousValue](usePreviousValue.md)
* [useValueHistory](useValueHistory.md)
* [useValidatedState](useValidatedState.md)
* [useMediaQuery](useMediaQuery.md)
* [useOnlineState](useOnlineState.md)
* [useViewportSpy](useViewportSpy.md)
* [useViewportState](useViewportState.md)
* [useSpeechRecognition](useSpeechRecognition.md) and [useSpeechSynthesis](useSpeechSynthesis.md)
* [useGeolocation](useGeolocation.md), [useGeolocationState](useGeolocationState.md)
and [useGeolocationEvents](useGeolocationEvents.md)
* [useDrag](useDrag.md), [useDropZone](useDropZone.md) and [useDragEvents](useDragEvents.md)
* [useMouse](useMouse.md), [useMouseState](useMouseState.md) and [useMouseEvents](useMouseEvents.md)
* [useTouch](useTouch.md), [useTouchState](useTouchState.md) and [useTouchEvents](useTouchEvents.md)
* [useLifecycle](useLifecycle.md), [useDidMount](useDidMount.md) and [useWillUnmount](useWillUnmount.md)
* [useWindowResize](useWindowResize.md)
* [useWindowScroll](useWindowScroll.md)
* [useRequestAnimationFrame](useRequestAnimationFrame.md)
* [useResizeObserver](useResizeObserver.md)
* [useTimeout](useTimeout.md)
* [useInterval](useInterval.md)
* [useDebouncedCallback](useDebouncedCallback.md)
* [useThrottledCallback](useThrottledCallback.md)
* [useLocalStorage](useLocalStorage.md)
* [useSessionStorage](useSessionStorage.md)
* [useDefaultedState](useDefaultedState.md)
* [useRenderInfo](useRenderInfo.md)
* [useSwipe](useSwipe.md), [useHorizontalSwipe](useHorizontalSwipe.md) and [useVerticalSwipe](useVerticalSwipe.md)
* [useSwipeEvents](useSwipeEvents.md)
* [useConditionalTimeout](useConditionalTimeout.md)
* [useCookie](useCookie.md)
* [useDarkMode](useDarkMode.md)
* [useUpdateEffect](useUpdateEffect.md)
* [useIsFirstRender](useIsFirstRender.md)
* [useMutationObserver](useMutationObserver.md)
* [useAudio](useAudio.md)
* [useObjectState](useObjectState.md)
* [useToggle](useToggle.md)
* [useQueryParam](useQueryParam.md)
* [useQueryParams](useQueryParams.md)
* [useSearchQuery](useSearchQuery.md)
* [useURLSearchParams](useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Para probar clic aquí🌟
</a>
</p>
</div>
## Contribuir
Las contribuciones son muy bienvenidas y deseadas.
Para presentar su custom hook, por favor asegúrese de leer nuestro [CONTRIBUTING](../CONTRIBUTING.md) guidelines.
**Antes de enviar** un nuevo merge request, por favor asegúrese:
1. Ha actualizado el package.json version e informó de sus cambios en el archivo [CHANGELOG](../CHANGELOG.md)
2. Asegúrate de ejecutar `npm test` y `npm build` antes de enviar el merge request.
3. Asegúrate de que has añadido la documentación de tu custom hook (* puedes usar
el [HOOK_DOCUMENTATION_TEMPLATE](../HOOK_DOCUMENTATION_TEMPLATE.md) para documentar tu custom hook*).
4. Asegúrate de que has actualizado el `index.d.ts` el archivo de tus tipo de hook.
### Herramientas utilizadas
* [React](https://reactjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](https://www.chaijs.com/)
* [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
* [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
---
Icon desde [Freepik](https://www.flaticon.com/authors/freepik) y [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
================================================
FILE: docs/README.it-IT.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="../logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
Una collezione di hooks leggeri (e si spera utili) per velocizzare lo sviluppo di hooks personalizzati e
componenti React
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Provali in azione qui 🌟
</a>
</p>
</div>
<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/">🇬🇧 English</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">🇨🇳 简体中文</a> | 🇮🇹 Italiano
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> 🇪🇸 Español </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">🇺🇦 Ukrainian</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">🇧🇷 Brazilian Portuguese</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">🇵🇱 Polski </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">🇯🇵 日本語 </a>
In un'applicazione React, gli hooks ci permettono di astrarre complesse logiche di business in singole funzioni riutilizzabili.<br />
Fino ad ora abbiamo notato che la maggior parte degli hooks che abbiamo creato e condiviso nei nostri progetti, hanno un
_core_ piuttosto simile tra loro, un _core_ che coinvolge spesso gli stessi pattern di sviluppo (callback, referenze e cicli di vita).<br />
Per queato motivo abbiamo cercato di semplificare e concentrare questo _core_ in `beautiful-react-hooks`: una collezione di piccoli hooks
riutilizzabili per aiutare altri sviluppatori (e società) a velocizzare i loro processi di sviluppo.<br /><br />
Abbiamo cercato di creare una API che fosse sia concisa che coerente, concentrandoci sulla scalabilità e la leggibilità del codice,
mantenendo la curva d'apprendimento il più bassa possible.
**-- Prima di usare qualsiasi hook, leggi la documentazione! --**
## ☕️ Features
* API concisa e coerente
* Piccole funzioni riutilizzabili
* Facile da imparare
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Provali in azione qui 🌟
</a>
</p>
</div>
## 🕺 Installazione
Usando `npm`:
```bash
$ npm install beautiful-react-hooks
```
oppure usando `yarn`:
```bash
$ yarn add beautiful-react-hooks
```
## 🎨 Hooks
* [useMutableState](useMutableState.md)
* [useInfiniteScroll](useInfiniteScroll.md)
* [useObservable](useObservable.md)
* [useEvent](useEvent.md)
* [useGlobalEvent](useGlobalEvent.md)
* [usePreviousValue](usePreviousValue.md)
* [useValueHistory](useValueHistory.md)
* [useValidatedState](useValidatedState.md)
* [useMediaQuery](useMediaQuery.md)
* [useOnlineState](useOnlineState.md)
* [useViewportSpy](useViewportSpy.md)
* [useViewportState](useViewportState.md)
* [useSpeechRecognition](useSpeechRecognition.md) and [useSpeechSynthesis](useSpeechSynthesis.md)
* [useGeolocation](useGeolocation.md), [useGeolocationState](useGeolocationState.md)
and [useGeolocationEvents](useGeolocationEvents.md)
* [useDrag](useDrag.md), [useDropZone](useDropZone.md) and [useDragEvents](useDragEvents.md)
* [useMouse](useMouse.md), [useMouseState](useMouseState.md) and [useMouseEvents](useMouseEvents.md)
* [useTouch](useTouch.md), [useTouchState](useTouchState.md) and [useTouchEvents](useTouchEvents.md)
* [useLifecycle](useLifecycle.md), [useDidMount](useDidMount.md) and [useWillUnmount](useWillUnmount.md)
* [useWindowResize](useWindowResize.md)
* [useWindowScroll](useWindowScroll.md)
* [useRequestAnimationFrame](useRequestAnimationFrame.md)
* [useResizeObserver](useResizeObserver.md)
* [useTimeout](useTimeout.md)
* [useInterval](useInterval.md)
* [useDebouncedCallback](useDebouncedCallback.md)
* [useThrottledCallback](useThrottledCallback.md)
* [useLocalStorage](useLocalStorage.md)
* [useSessionStorage](useSessionStorage.md)
* [useDefaultedState](useDefaultedState.md)
* [useRenderInfo](useRenderInfo.md)
* [useSwipe](useSwipe.md), [useHorizontalSwipe](useHorizontalSwipe.md) and [useVerticalSwipe](useVerticalSwipe.md)
* [useSwipeEvents](useSwipeEvents.md)
* [useConditionalTimeout](useConditionalTimeout.md)
* [useCookie](useCookie.md)
* [useDarkMode](useDarkMode.md)
* [useUpdateEffect](useUpdateEffect.md)
* [useIsFirstRender](useIsFirstRender.md)
* [useMutationObserver](useMutationObserver.md)
* [useAudio](useAudio.md)
* [useObjectState](useObjectState.md)
* [useToggle](useToggle.md)
* [useQueryParam](useQueryParam.md)
* [useQueryParams](useQueryParams.md)
* [useSearchQuery](useSearchQuery.md)
* [useURLSearchParams](useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Provali in azione qui 🌟
</a>
</p>
</div>
## Contribuisci
La tua contribuzione è benvenuta!
Per inviare il tuo custom hook, leggi le nostre [linee guida](../CONTRIBUTING.md) in materia di contribuzioni.
**Prima di inviarci** la tua pull request, per favore sii sicuro che:
1. Hai aggiornato la versione nel file package.json ed hai aggiunto i cambiamenti che hai fatto nel file [CHANGELOG](../CHANGELOG.md).
2. Hai fatto partire i testi con `npm test` ed hai fatto una build locale con `npm build`.
3. Hai aggiunto la documentazione del tuo custom hook (*puoi partire dal
template [HOOK_DOCUMENTATION_TEMPLATE](../HOOK_DOCUMENTATION_TEMPLATE.md), per scrivere la tua documentazione*).
4. Hai aggiornato il file `index.d.ts` aggiungendo i tipi Typescript del tuo hook.
### Tools utilizzati
* [React](https://reactjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](https://www.chaijs.com/)
* [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
* [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
---
Icona fatta dall'utente [Freepik](https://www.flaticon.com/authors/freepik)
su [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
================================================
FILE: docs/README.jp-JP.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="../logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
コンポーネントやフック開発を高速化するための、美しい（できれば便利な） React フックのコレクションです。
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 ライブプレイグラウンドはこちら 🌟
</a>
</p>
</div>
<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/">🇬🇧 English</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">🇨🇳 简体中文</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">🇮🇹 Italiano</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> 🇪🇸 Español </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">🇺🇦 Ukrainian</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">🇧🇷 Brazilian Portuguese</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">🇵🇱 Polski </a>
| 🇯🇵 日本語
## 💡 なぜ?
React のカスタムフックは抽象的なコンポーネントのビジネスロジックを単一な再利用可能な関数とする事が出来ます。<br />
これまでのところ、私たちが作成し、内部で共有されているフックの大半はかなりの頻度でコールバック参照、イベントとコンポーネントのライフサイクルに関して類似する点がある事が分かっています。<br />
この理由から、私たちはそれらの知見を企業や専門家が開発プロセスをスピードアップするのに役立つ（*できれば*）便利な React フックのコレクションとして `beautiful-react-hooks` にまとめました。
<br /><br />
さらに、コードの読みやすさを考慮して、簡潔かつ具体的な API を作成しました。 より大きなチームで使用し、共有できるように、学習曲線を可能な限り低く抑える事が可能です。
**-- フックを利用する前に、ドキュメントを確認して下さい！ --**
## ☕️ 特徴
* 簡潔な API
* 軽量
* 学習が容易
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 ライブプレイグラウンドはこちら 🌟
</a>
</p>
</div>
## 🕺 インストール
`npm` を利用する場合:
```bash
$ npm install beautiful-react-hooks
```
`yarn` を利用する場合:
```bash
$ yarn add beautiful-react-hooks
```
## 🎨 Hooks
* [useMutableState](useMutableState.md)
* [useInfiniteScroll](useInfiniteScroll.md)
* [useObservable](useObservable.md)
* [useEvent](useEvent.md)
* [useGlobalEvent](useGlobalEvent.md)
* [usePreviousValue](usePreviousValue.md)
* [useValueHistory](useValueHistory.md)
* [useValidatedState](useValidatedState.md)
* [useMediaQuery](useMediaQuery.md)
* [useOnlineState](useOnlineState.md)
* [useViewportSpy](useViewportSpy.md)
* [useViewportState](useViewportState.md)
* [useSpeechRecognition](useSpeechRecognition.md) and [useSpeechSynthesis](useSpeechSynthesis.md)
* [useGeolocation](useGeolocation.md), [useGeolocationState](useGeolocationState.md)
and [useGeolocationEvents](useGeolocationEvents.md)
* [useDrag](useDrag.md), [useDropZone](useDropZone.md) and [useDragEvents](useDragEvents.md)
* [useMouse](useMouse.md), [useMouseState](useMouseState.md) and [useMouseEvents](useMouseEvents.md)
* [useTouch](useTouch.md), [useTouchState](useTouchState.md) and [useTouchEvents](useTouchEvents.md)
* [useLifecycle](useLifecycle.md), [useDidMount](useDidMount.md) and [useWillUnmount](useWillUnmount.md)
* [useWindowResize](useWindowResize.md)
* [useWindowScroll](useWindowScroll.md)
* [useRequestAnimationFrame](useRequestAnimationFrame.md)
* [useResizeObserver](useResizeObserver.md)
* [useTimeout](useTimeout.md)
* [useInterval](useInterval.md)
* [useDebouncedCallback](useDebouncedCallback.md)
* [useThrottledCallback](useThrottledCallback.md)
* [useLocalStorage](useLocalStorage.md)
* [useSessionStorage](useSessionStorage.md)
* [useDefaultedState](useDefaultedState.md)
* [useRenderInfo](useRenderInfo.md)
* [useSwipe](useSwipe.md), [useHorizontalSwipe](useHorizontalSwipe.md) and [useVerticalSwipe](useVerticalSwipe.md)
* [useSwipeEvents](useSwipeEvents.md)
* [useConditionalTimeout](useConditionalTimeout.md)
* [useCookie](useCookie.md)
* [useDarkMode](useDarkMode.md)
* [useUpdateEffect](useUpdateEffect.md)
* [useIsFirstRender](useIsFirstRender.md)
* [useMutationObserver](useMutationObserver.md)
* [useAudio](useAudio.md)
* [useObjectState](useObjectState.md)
* [useToggle](useToggle.md)
* [useQueryParam](useQueryParam.md)
* [useQueryParams](useQueryParams.md)
* [useSearchQuery](useSearchQuery.md)
* [useURLSearchParams](useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 ライブプレイグラウンドはこちら 🌟
</a>
</p>
</div>
## Peer dependencies
いくつかのフックはサードパーティライブラリ(rxjs、react-router-dom、redux)の上に構築されているため、それらのライブラリが peer dependencies
としてリストされていることに気づくかもしれません。直接的にそれらのフックを使用しない限り、依存関係としてインストールする必要はありません。
## コントリビューション
このリポジトリへの貢献は大歓迎ですし、必要としています。
あなたが作成したカスタムフックの PR を送るにあたり、私たちの [CONTRIBUTING](../CONTRIBUTING.md) ガイドラインを必ず確認するようにしてください。
**PR を送る前に**、下記を確認してください:
1. コードのテストを必ず書くようにし、PR を送る前に `npm test` と `npm build` を実行して問題がない事を確認してください。
2. カスタムフックを作成する場合には、ドキュメントに必ず追加するようにしてください。
(*カスタムフックのドキュメントテンプレートを用意しています [HOOK_DOCUMENTATION_TEMPLATE](../HOOK_DOCUMENTATION_TEMPLATE.md)*).
### 利用しているライブラリ
* [React](https://reactjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](https://www.chaijs.com/)
* [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
* [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
---
アイコンは [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812) で [Freepik](https://www.flaticon.com/authors/freepik) によって作成されました。
================================================
FILE: docs/README.pl-PL.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="../logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
Zbiór pięknych (i mamy nadzieję, że użytecznych) hooków React, mających na celu przyspieszenie
tworzenia spersonalizowanych hooków oraz komponentów.
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Wypróbuj je tutaj 🌟
</a>
</p>
</div>
<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/">🇬🇧 English</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">🇨🇳 简体中文</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">🇮🇹 Italiano</a>
|<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> 🇪🇸 Español
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">🇺🇦 Ukrainian</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">🇧🇷 Brazilian Portuguese</a> |
🇵🇱 Polski | <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">🇯🇵 日本語 </a>
## 💡 Dlaczego?
W aplikacji React hooki pozwalają na wyodrębnienie logiki biznesowej komponentów do pojedyńczych funkcji wielokrotnego użytku.<br />
Odkryliśmy, że większość hooków, które stworzyliśmy i dzieliliśmy między naszymi wewnętrznymi projektami, miały zazwyczaj podobną istotę,
obejmującą callbacki, eventy oraz cykle zycia komponentów. <br />
Z tego powodu podjęliśmy próbę zebrania tej istoty pod postacią `beautiful-react-hooks` będących zbiorem (* mamy nadzieję *) przydatnych
hooków React, mającym na celu pomoc innym firmom i specjalistom w przyspieszeniu procesu tworzenia aplikacji.<br /><br />
Ponadto, stworzyliśmy zwięzłe i konkretne API, mając na uwadze czytelność kodu oraz pragnąc utrzymać krzywą uczenia się na jak najniższym
poziomie, tak, aby można je było wykorzystywać i dzielić się nim w większych zespołach.
**-- Przeczytaj dokumentację kadego z hooków przed jego użyciem! --**
## ☕️ Cechy
* Zwarte API
* Małe i lekkie
* Łatwe do nauki
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Wypróbuj je tutaj 🌟
</a>
</p>
</div>
## 🕺 Instalacja
używając `npm`:
```bash
$ npm install beautiful-react-hooks
```
używając `yarn`:
```bash
$ yarn add beautiful-react-hooks
```
## 🎨 Hooki
* [useMutableState](useMutableState.md)
* [useInfiniteScroll](useInfiniteScroll.md)
* [useObservable](useObservable.md)
* [useEvent](useEvent.md)
* [useGlobalEvent](useGlobalEvent.md)
* [usePreviousValue](usePreviousValue.md)
* [useValueHistory](useValueHistory.md)
* [useValidatedState](useValidatedState.md)
* [useMediaQuery](useMediaQuery.md)
* [useOnlineState](useOnlineState.md)
* [useViewportSpy](useViewportSpy.md)
* [useViewportState](useViewportState.md)
* [useSpeechRecognition](useSpeechRecognition.md) and [useSpeechSynthesis](useSpeechSynthesis.md)
* [useGeolocation](useGeolocation.md), [useGeolocationState](useGeolocationState.md)
and [useGeolocationEvents](useGeolocationEvents.md)
* [useDrag](useDrag.md), [useDropZone](useDropZone.md) and [useDragEvents](useDragEvents.md)
* [useMouse](useMouse.md), [useMouseState](useMouseState.md) and [useMouseEvents](useMouseEvents.md)
* [useTouch](useTouch.md), [useTouchState](useTouchState.md) and [useTouchEvents](useTouchEvents.md)
* [useLifecycle](useLifecycle.md), [useDidMount](useDidMount.md) and [useWillUnmount](useWillUnmount.md)
* [useWindowResize](useWindowResize.md)
* [useWindowScroll](useWindowScroll.md)
* [useRequestAnimationFrame](useRequestAnimationFrame.md)
* [useResizeObserver](useResizeObserver.md)
* [useTimeout](useTimeout.md)
* [useInterval](useInterval.md)
* [useDebouncedCallback](useDebouncedCallback.md)
* [useThrottledCallback](useThrottledCallback.md)
* [useLocalStorage](useLocalStorage.md)
* [useSessionStorage](useSessionStorage.md)
* [useDefaultedState](useDefaultedState.md)
* [useRenderInfo](useRenderInfo.md)
* [useSwipe](useSwipe.md), [useHorizontalSwipe](useHorizontalSwipe.md) and [useVerticalSwipe](useVerticalSwipe.md)
* [useSwipeEvents](useSwipeEvents.md)
* [useConditionalTimeout](useConditionalTimeout.md)
* [useCookie](useCookie.md)
* [useDarkMode](useDarkMode.md)
* [useUpdateEffect](useUpdateEffect.md)
* [useIsFirstRender](useIsFirstRender.md)
* [useMutationObserver](useMutationObserver.md)
* [useAudio](useAudio.md)
* [useObjectState](useObjectState.md)
* [useToggle](useToggle.md)
* [useQueryParam](useQueryParam.md)
* [useQueryParams](useQueryParams.md)
* [useSearchQuery](useSearchQuery.md)
* [useURLSearchParams](useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Wypróbuj je tutaj 🌟
</a>
</p>
</div>
## Współpraca
Współpraca jest bardzo mile widziana.
Przed dodaniem nowego hooka zapoznaj się koniecznie z zasadami projektowymi tutaj [CONTRIBUTING](../CONTRIBUTING.md)
**Przed stworzeniem** nowego pull request, upewnij się, że:
1. uaktualniłeś wersję pliku package.json oraz dodałeś zmiany w pliku [CHANGELOG](../CHANGELOG.md)
2. użyłeś komend `npm test` oraz `npm build`.
3. dodałeś dokumentację do twojego nowego hooka (*możesz użyć szablon [HOOK_DOCUMENTATION_TEMPLATE](../HOOK_DOCUMENTATION_TEMPLATE.md)*).
4. uaktualniłeś plik `index.d.ts` dodając typy Typescript twojego hooka.
### Użyte narzędzia
* [React](https://reactjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](https://www.chaijs.com/)
* [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
* [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
---
Ikona wykonana przez [Freepik](https://www.flaticon.com/authors/freepik)
na [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
================================================
FILE: docs/README.pt-BR.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="../logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
Uma coleção de React hooks lindos (e esperamos que úteis) para acelerar o desenvolvimento de seus componentes e hooks
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Playground aqui 🌟
</a>
</p>
</div>
<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/">🇬🇧 English</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">🇨🇳 简体中文</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">🇮🇹 Italiano</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> 🇪🇸 Español </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">🇺🇦 Ukrainian</a> | 🇧🇷
Brazilian Portuguese | <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">🇵🇱
Polski </a> | <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">🇯🇵 日本語 </a>
## 💡 Por quê?
React hooks permitem a abstrair a lógica de negócios dos componentes em funções únicas e reutilizáveis.<br />
Até agora, descobrimos que a maioria dos hooks que criamos e, portanto, compartilhamos entre nossos projetos internos, muitas vezes têm uma
essência semelhante que envolve referências de callback, eventos e ciclo de vida dos componentes. <br />
Por este motivo, tentamos resumir esta essência em `beautiful-react-hooks`: uma coleção de React hooks úteis (*assim esperamos*)
para possivelmente ajudar outras empresas e profissionais à agilizarem seus processos de desenvolvimento.<br /><br />
Além disso, criamos uma API simples porém sólida, tendo em mente a legibilidade do código, com o objetivo de manter a curva de aprendizado o
mais baixa possível, para que possa ser usada e compartilhada em equipes maiores.
**-- Por favor, antes de utilizar qualquer hook, leia a sua documentação! --**
## ☕️ Recursos
* API simples
* Pequeno e leve
* Fácil de aprender
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Playground aqui 🌟
</a>
</p>
</div>
## 🕺 Instalação
utilizando `npm`:
```bash
$ npm install beautiful-react-hooks
```
utilizando `yarn`:
```bash
$ yarn add beautiful-react-hooks
```
## 🎨 Hooks
* [useMutableState](useMutableState.md)
* [useInfiniteScroll](useInfiniteScroll.md)
* [useObservable](useObservable.md)
* [useEvent](useEvent.md)
* [useGlobalEvent](useGlobalEvent.md)
* [usePreviousValue](usePreviousValue.md)
* [useValueHistory](useValueHistory.md)
* [useValidatedState](useValidatedState.md)
* [useMediaQuery](useMediaQuery.md)
* [useOnlineState](useOnlineState.md)
* [useViewportSpy](useViewportSpy.md)
* [useViewportState](useViewportState.md)
* [useSpeechRecognition](useSpeechRecognition.md) and [useSpeechSynthesis](useSpeechSynthesis.md)
* [useGeolocation](useGeolocation.md), [useGeolocationState](useGeolocationState.md)
and [useGeolocationEvents](useGeolocationEvents.md)
* [useDrag](useDrag.md), [useDropZone](useDropZone.md) and [useDragEvents](useDragEvents.md)
* [useMouse](useMouse.md), [useMouseState](useMouseState.md) and [useMouseEvents](useMouseEvents.md)
* [useTouch](useTouch.md), [useTouchState](useTouchState.md) and [useTouchEvents](useTouchEvents.md)
* [useLifecycle](useLifecycle.md), [useDidMount](useDidMount.md) and [useWillUnmount](useWillUnmount.md)
* [useWindowResize](useWindowResize.md)
* [useWindowScroll](useWindowScroll.md)
* [useRequestAnimationFrame](useRequestAnimationFrame.md)
* [useResizeObserver](useResizeObserver.md)
* [useTimeout](useTimeout.md)
* [useInterval](useInterval.md)
* [useDebouncedCallback](useDebouncedCallback.md)
* [useThrottledCallback](useThrottledCallback.md)
* [useLocalStorage](useLocalStorage.md)
* [useSessionStorage](useSessionStorage.md)
* [useDefaultedState](useDefaultedState.md)
* [useRenderInfo](useRenderInfo.md)
* [useSwipe](useSwipe.md), [useHorizontalSwipe](useHorizontalSwipe.md) and [useVerticalSwipe](useVerticalSwipe.md)
* [useSwipeEvents](useSwipeEvents.md)
* [useConditionalTimeout](useConditionalTimeout.md)
* [useCookie](useCookie.md)
* [useDarkMode](useDarkMode.md)
* [useUpdateEffect](useUpdateEffect.md)
* [useIsFirstRender](useIsFirstRender.md)
* [useMutationObserver](useMutationObserver.md)
* [useAudio](useAudio.md)
* [useObjectState](useObjectState.md)
* [useToggle](useToggle.md)
* [useQueryParam](useQueryParam.md)
* [useQueryParams](useQueryParams.md)
* [useSearchQuery](useSearchQuery.md)
* [useURLSearchParams](useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Playground aqui 🌟
</a>
</p>
</div>
## Contribuindo
Contribuições são muito bem-vindas e desejadas.
Para enviar sua hook, por favor, certifique-se de ler o nosso arquivo [CONTRIBUTING](../CONTRIBUTING.md).
**Antes de enviar** um novo merge request, por favor certifique-se:
1. Você atualizou a versão no package.json e relatou suas alterações no arquivo [CHANGELOG](../CHANGELOG.md)
2. Certifique-se de rodar `npm test` e `npm build` antes de enviar o merge request.
3. Certifique-se de que você adicionou a documentação da sua hook (*você pode utilizar como base
o [HOOK_DOCUMENTATION_TEMPLATE](../HOOK_DOCUMENTATION_TEMPLATE.md) para documentar sua hook*).
4. Certifique-se de que atualizou o arquivo `index.d.ts` com os tipos da sua hook.
### Feito com
* [React](https://reactjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](https://www.chaijs.com/)
* [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
* [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
---
Ícone criado por [Freepik](https://www.flaticon.com/authors/freepik) / [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
================================================
FILE: docs/README.tr-TR.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="../logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
Geliştirme sürecinizi hızlandırmak ve daha verimli hale getirmek için özel olarak hazırlanmış React hooklar koleksiyonu.
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Bütün Özel React Hookları 🌟
</a>
</p>
</div>
<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/">🇬🇧 English</a> | <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">🇨🇳 简体中文</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">🇮🇹 Italiano</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> 🇪🇸 Español </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">🇺🇦 Ukrainian</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">🇧🇷 Brazilian Portuguese</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">🇵🇱 Polski </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">🇯🇵 日本語 </a>
| 🇹🇷 Türkçe
## 💡 Neden?
Özel React hooklar, geliştiricilere bileşenlerin iş mantığını tek, yeniden kullanılabilir işlevlere soyutlama imkanı sağlar.
Oluşturduğum ve projeler arasında paylaştığım birçok hookun geri çağrıları, referansları, etkinlikleri ve bileşen yaşam döngüsü ile ilgili olduğunu fark ettim.\
Bu nedenle `beautiful-react-hooks`, adlı, diğer geliştiricilerin geliştirme süreçlerini hızlandırmalarına yardımcı olabilecek kullanışlı [React hooks](https://beta.reactjs.org/reference/react) koleksiyonunu oluşturdum.
Ayrıca, kod okunabilirliğini vurgulayan, öğrenme eğrisini mümkün olduğunca düşük tutarak daha büyük ekiplerin kullanımı ve paylaşımı için uygun hale getiren özlü ve pratik bir API oluşturmayı amaçladım.
**-- Lütfen herhangi bir hook'u kullanmadan önce belgesini okuyun! --**
## ☕️ Özellikler
- Sade API
- Hafif ve küçük
- Öğrenmesi kolay
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Bütün Özel React Hookları 🌟
</a>
</p>
</div>
## 🕺 Kurulumu
`npm` kullanıyorsanız:
```bash
$ npm install beautiful-react-hooks
```
`yarn` kullanıyorsanız:
```bash
$ yarn add beautiful-react-hooks
```
## Temel kullanımı
İstediğiniz özel hook'u aşağıdaki şekilde import ederek kolayca kullanabilirsin.:
```ts static
import useSomeHook from "beautiful-react-hooks/useSomeHook";
```
## 🎨 Hooks
- [useMutableState](docs/useMutableState.md)
- [useInfiniteScroll](docs/useInfiniteScroll.md)
- [useObservable](docs/useObservable.md)
- [useEvent](docs/useEvent.md)
- [useGlobalEvent](docs/useGlobalEvent.md)
- [usePreviousValue](docs/usePreviousValue.md)
- [useValueHistory](docs/useValueHistory.md)
- [useValidatedState](docs/useValidatedState.md)
- [useMediaQuery](docs/useMediaQuery.md)
- [useOnlineState](docs/useOnlineState.md)
- [useViewportSpy](docs/useViewportSpy.md)
- [useViewportState](docs/useViewportState.md)
- [useSpeechRecognition](docs/useSpeechRecognition.md) and [useSpeechSynthesis](docs/useSpeechSynthesis.md)
- [useGeolocation](docs/useGeolocation.md), [useGeolocationState](docs/useGeolocationState.md)
and [useGeolocationEvents](docs/useGeolocationEvents.md)
- [useDrag](docs/useDrag.md), [useDropZone](docs/useDropZone.md) and [useDragEvents](docs/useDragEvents.md)
- [useMouse](docs/useMouse.md), [useMouseState](docs/useMouseState.md) and [useMouseEvents](docs/useMouseEvents.md)
- [useTouch](docs/useTouch.md), [useTouchState](docs/useTouchState.md) and [useTouchEvents](docs/useTouchEvents.md)
- [useLifecycle](docs/useLifecycle.md), [useDidMount](docs/useDidMount.md) and [useWillUnmount](docs/useWillUnmount.md)
- [useWindowResize](docs/useWindowResize.md)
- [useWindowScroll](docs/useWindowScroll.md)
- [useRequestAnimationFrame](docs/useRequestAnimationFrame.md)
- [useResizeObserver](docs/useResizeObserver.md)
- [useTimeout](docs/useTimeout.md)
- [useInterval](docs/useInterval.md)
- [useDebouncedCallback](docs/useDebouncedCallback.md)
- [useThrottledCallback](docs/useThrottledCallback.md)
- [useLocalStorage](docs/useLocalStorage.md)
- [useSessionStorage](docs/useSessionStorage.md)
- [useDefaultedState](docs/useDefaultedState.md)
- [useRenderInfo](docs/useRenderInfo.md)
- [useSwipe](docs/useSwipe.md), [useHorizontalSwipe](docs/useHorizontalSwipe.md) and [useVerticalSwipe](docs/useVerticalSwipe.md)
- [useSwipeEvents](docs/useSwipeEvents.md)
- [useConditionalTimeout](docs/useConditionalTimeout.md)
- [useCookie](docs/useCookie.md)
- [useDarkMode](docs/useDarkMode.md)
- [useUnmount](docs/useUnmount.md)
- [useUpdateEffect](docs/useUpdateEffect.md)
- [useIsFirstRender](docs/useIsFirstRender.md)
- [useMutationObserver](docs/useMutationObserver.md)
- [useAudio](docs/useAudio.md)
- [useObjectState](docs/useObjectState.md)
- [useToggle](docs/useToggle.md)
- [useQueryParam](docs/useQueryParam.md)
- [useQueryParams](docs/useQueryParams.md)
- [useSearchQuery](docs/useSearchQuery.md)
- [useURLSearchParams](docs/useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Bütün Özel React Hookları🌟
</a>
</p>
</div>
## Eş Bağımlılıklar
Bazı hooklar üçüncü taraf kütüphaneleri kullanarak oluşturulur (örneğin rxjs, react-router-dom, redux gibi). Bu nedenle, bu kütüphaneleri eş bağımlılıklar olarak listelenmiş olarak göreceksiniz.\
Eğer bu hookları doğrudan kullanmıyorsanız, bu bağımlılıkları yüklemeniz gerekmez
## Katkıda Bulunma
Katkıda bulunmak hoş görülür ve istenir.
Özel hook'unuzu göndermeden önce [CONTRIBUTING](./CONTRIBUTING.md) yönergelerini tamamen okuduğunuzdan ve anladığınızdan emin olun.
**Pull isteğini göndermeden önce**: Lütfen aşağıdakilere dikkat edin
1. Kodunuz için testler yazmayı unutmayın ve çekme isteğinizi göndermeden önce `npm test` ve `npm build` komutlarını çalıştırın.
2. Eğer özel bir hook oluşturuyorsanız, lütfen özel hook'unuzu belgelediğinizden emin olun (_Özel hook'unuzu belgelemek için [HOOK_DOCUMENTATION_TEMPLATE](./HOOK_DOCUMENTATION_TEMPLATE.md) bu dökümanı kullanabilirsiniz._).
## Katkılar
Simge [Freepik](https://www.flaticon.com/authors/freepik) tarafından [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812) adresinden oluşturuldu.
================================================
FILE: docs/README.uk-UA.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="../logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
Колекція красивих (також надіємось що корисних) Реакт хуків, для прискорення розробки ваших компонентів та хуків.
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Спробуйте їх у дії тут 🌟
</a>
</p>
</div>
<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/">🇬🇧 English</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">🇨🇳 简体中文</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">🇮🇹 Italiano</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> 🇪🇸 Español </a> | 🇺🇦
Ukrainian | <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">🇧🇷 Brazilian
Portuguese</a> | <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">🇵🇱 Polski </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">🇯🇵 日本語 </a>
## 💡 Чому?
Кастомні Реакт хуки дозволяють абстрагувати бізнес логіку компонентів в окремі функції багаторазового використання.<br />
Досі, ми зауважили, що більшість хуків які ми створили і після цього поширили між нашими внутрішніми проектами, досить часто мають
аналогічну суть, що включають в себе виклик колбек функцій, подій та життєвих циклів компонентів.<br />
З цієї причини, ми спробували реалізувати цю суть в `beautiful-react-hooks`: колекцію (*сподіваємось*) корисних Реакт хуків, для того щоб
допомогти іншим компаніям та професіоналам пришвидшити їхній процес розробки.<br /><br />
Крім того, ми створили лаконічний, але конкретний API, з точки зору читабельності коду, маючи на меті тримати криву вивчення настільки
низькою, наскільки це можливо, тому це може бути використано та поширено у великих командах.
**-- Будь-ласка, перед використанням будь-яких хуків, прочитайте їхню документацію! --**
## ☕️ Особливості
* Лаконічний API
* Малий розмір та легкість
* Простий у вивченні
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Спробуйте їх у дії тут 🌟
</a>
</p>
</div>
## 🕺 Встановлення
Використовуючи `npm`:
```bash
$ npm install beautiful-react-hooks
```
Використовуючи `yarn`:
```bash
$ yarn add beautiful-react-hooks
```
## 🎨 Хуки
* [useMutableState](useMutableState.md)
* [useInfiniteScroll](useInfiniteScroll.md)
* [useObservable](useObservable.md)
* [useEvent](useEvent.md)
* [useGlobalEvent](useGlobalEvent.md)
* [usePreviousValue](usePreviousValue.md)
* [useValueHistory](useValueHistory.md)
* [useValidatedState](useValidatedState.md)
* [useMediaQuery](useMediaQuery.md)
* [useOnlineState](useOnlineState.md)
* [useViewportSpy](useViewportSpy.md)
* [useViewportState](useViewportState.md)
* [useSpeechRecognition](useSpeechRecognition.md) and [useSpeechSynthesis](useSpeechSynthesis.md)
* [useGeolocation](useGeolocation.md), [useGeolocationState](useGeolocationState.md)
and [useGeolocationEvents](useGeolocationEvents.md)
* [useDrag](useDrag.md), [useDropZone](useDropZone.md) and [useDragEvents](useDragEvents.md)
* [useMouse](useMouse.md), [useMouseState](useMouseState.md) and [useMouseEvents](useMouseEvents.md)
* [useTouch](useTouch.md), [useTouchState](useTouchState.md) and [useTouchEvents](useTouchEvents.md)
* [useLifecycle](useLifecycle.md), [useDidMount](useDidMount.md) and [useWillUnmount](useWillUnmount.md)
* [useWindowResize](useWindowResize.md)
* [useWindowScroll](useWindowScroll.md)
* [useRequestAnimationFrame](useRequestAnimationFrame.md)
* [useResizeObserver](useResizeObserver.md)
* [useTimeout](useTimeout.md)
* [useInterval](useInterval.md)
* [useDebouncedCallback](useDebouncedCallback.md)
* [useThrottledCallback](useThrottledCallback.md)
* [useLocalStorage](useLocalStorage.md)
* [useSessionStorage](useSessionStorage.md)
* [useDefaultedState](useDefaultedState.md)
* [useRenderInfo](useRenderInfo.md)
* [useSwipe](useSwipe.md), [useHorizontalSwipe](useHorizontalSwipe.md) and [useVerticalSwipe](useVerticalSwipe.md)
* [useSwipeEvents](useSwipeEvents.md)
* [useConditionalTimeout](useConditionalTimeout.md)
* [useCookie](useCookie.md)
* [useDarkMode](useDarkMode.md)
* [useUpdateEffect](useUpdateEffect.md)
* [useIsFirstRender](useIsFirstRender.md)
* [useMutationObserver](useMutationObserver.md)
* [useAudio](useAudio.md)
* [useObjectState](useObjectState.md)
* [useToggle](useToggle.md)
* [useQueryParam](useQueryParam.md)
* [useQueryParams](useQueryParams.md)
* [useSearchQuery](useSearchQuery.md)
* [useURLSearchParams](useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 Спробуйте їх у дії тут 🌟
</a>
</p>
</div>
## Внески
Ваші внески в проект дуже вітаються та потрібні.
Але для подання ваших кастомних хуків, переконайтесь що ви ознайомились з нашим гайдом
для [ВНЕСКІВ](https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/CONTRIBUTING.md).
**Перед поданням** нового merge реквесту, будь-ласка переконайтеся:
1. Ви оновили версію package.json і повідомили про свої зміни
в [CHANGELOG](https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/CHANGELOG.md) файлі
2. Переконайтеся, що ви запустили `npm test` і `npm build` перед поданням вашого merge реквесту.
3. Переконайтеся що ви додали документацію ваших кастомних хуків(*ви також можете
використовувати [HOOK_DOCUMENTATION_TEMPLATE](https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/HOOK_DOCUMENTATION_TEMPLATE.md)
для документації кастомних хуків*).
4. Переконайтеся що ви оновили `index.d.ts` файл з вашими типами хуків.
### За сприяння
* [React](https://reactjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](https://www.chaijs.com/)
* [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
* [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
---
Зображення надано [Freepik](https://www.flaticon.com/authors/freepik) з [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
================================================
FILE: docs/README.zh-CN.md
================================================
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="../logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
可以显著为你提升组件开发和 hooks 开发效率的一系列漂亮（说不定也是才貌双全）的 React hooks。
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 在线演示 🌟
</a>
</p>
</div>
<a href="https://github.com/beautifulinteractions/beautiful-react-hooks/">🇬🇧 English</a> | 🇨🇳 简体中文
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">🇮🇹 Italiano</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> 🇪🇸 Español </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">🇺🇦 Ukrainian</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">🇧🇷 Brazilian Portuguese</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">🇵🇱 Polski </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">🇯🇵 日本語 </a>
## 💡 为什么?
React hooks 让我们能把组件的业务逻辑抽象到一个可重用的函数里。<br />
根据到目前为止的使用经验，我们发现：我们创建并在内部项目之间复用的大多数 hooks 通常都有一些共同的写法，涉及回调引用、事件或是组件生命周期。<br />
发现这一点后，我们尝试把这些常用的写法抽出来放进 `beautiful-react-hooks` —— 一系列 _（说不定）_ 有用的 React hooks —— 来帮助其他公司和专家们加速他们的开发。<br /><br />
此外，我们创建了简明而稳固的 API，时刻牢记代码可阅读性，专注于保持学习曲线越低越好，以便它们可以被更大的团队分享和使用。
**-- 请在使用任何 hook 之前读完它的文档！ --**
## ☕️ 功能
- 简明的 API
- 小巧轻量
- 易于学习
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 在线演示 🌟
</a>
</p>
</div>
## 🕺 安装
使用 `npm`:
```bash
$ npm install beautiful-react-hooks
```
使用 `yarn`:
```bash
$ yarn add beautiful-react-hooks
```
## 🎨 Hooks
* [useMutableState](useMutableState.md)
* [useInfiniteScroll](useInfiniteScroll.md)
* [useObservable](useObservable.md)
* [useEvent](useEvent.md)
* [useGlobalEvent](useGlobalEvent.md)
* [usePreviousValue](usePreviousValue.md)
* [useValueHistory](useValueHistory.md)
* [useValidatedState](useValidatedState.md)
* [useMediaQuery](useMediaQuery.md)
* [useOnlineState](useOnlineState.md)
* [useViewportSpy](useViewportSpy.md)
* [useViewportState](useViewportState.md)
* [useSpeechRecognition](useSpeechRecognition.md) and [useSpeechSynthesis](useSpeechSynthesis.md)
* [useGeolocation](useGeolocation.md), [useGeolocationState](useGeolocationState.md)
and [useGeolocationEvents](useGeolocationEvents.md)
* [useDrag](useDrag.md), [useDropZone](useDropZone.md) and [useDragEvents](useDragEvents.md)
* [useMouse](useMouse.md), [useMouseState](useMouseState.md) and [useMouseEvents](useMouseEvents.md)
* [useTouch](useTouch.md), [useTouchState](useTouchState.md) and [useTouchEvents](useTouchEvents.md)
* [useLifecycle](useLifecycle.md), [useDidMount](useDidMount.md) and [useWillUnmount](useWillUnmount.md)
* [useWindowResize](useWindowResize.md)
* [useWindowScroll](useWindowScroll.md)
* [useRequestAnimationFrame](useRequestAnimationFrame.md)
* [useResizeObserver](useResizeObserver.md)
* [useTimeout](useTimeout.md)
* [useInterval](useInterval.md)
* [useDebouncedCallback](useDebouncedCallback.md)
* [useThrottledCallback](useThrottledCallback.md)
* [useLocalStorage](useLocalStorage.md)
* [useSessionStorage](useSessionStorage.md)
* [useDefaultedState](useDefaultedState.md)
* [useRenderInfo](useRenderInfo.md)
* [useSwipe](useSwipe.md), [useHorizontalSwipe](useHorizontalSwipe.md) and [useVerticalSwipe](useVerticalSwipe.md)
* [useSwipeEvents](useSwipeEvents.md)
* [useConditionalTimeout](useConditionalTimeout.md)
* [useCookie](useCookie.md)
* [useDarkMode](useDarkMode.md)
* [useUpdateEffect](useUpdateEffect.md)
* [useIsFirstRender](useIsFirstRender.md)
* [useMutationObserver](useMutationObserver.md)
* [useAudio](useAudio.md)
* [useObjectState](useObjectState.md)
* [useToggle](useToggle.md)
* [useQueryParam](useQueryParam.md)
* [useQueryParams](useQueryParams.md)
* [useSearchQuery](useSearchQuery.md)
* [useURLSearchParams](useURLSearchParams.md)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
🌟 在线演示 🌟
</a>
</p>
</div>
## 如何贡献
我们非常欢迎而且期待着你的开源贡献。
如果想要提交你的自定义 hook，请确保你阅读过这篇 [贡献](../CONTRIBUTING.md) 守则。
在提交一个合并请求 **之前**，请确保:
1. 你已经更新了 package.json 里的版本号，并将你的变更说明放进了 [CHANGELOG](../CHANGELOG.md) 文件里。
2. 确保你执行过 `npm test` 和 `npm build` 再提交你的合并请求。
3. 确保你已经写好了你添加的自定义 hook 的文档 _（你可以使用[HOOK 文档模板](../HOOK_DOCUMENTATION_TEMPLATE.md) 来写你的文档 ）_
4. 确保你已经更新了 `index.d.ts` 文件，把你的 hook 的类型加进去了。
### 项目依赖
- [React](https://reactjs.org/)
- [Mocha](https://mochajs.org/)
- [Chai](https://www.chaijs.com/)
- [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
- [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
---
图标的作者是 [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
================================================
FILE: docs/useAudio.md
================================================
# useAudio
Creates an `<audio>` element, monitors its state and provides access to playback controls.
### Why? 💡
- A speedy approach to integrating the audio feature into your React component
- Enhances the readability of components involving the audio feature
### Basic Usage:
```jsx harmony
import { useRef, useState } from 'react';
import { Button, Typography } from 'antd';
import { PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons';
import useAudio from 'beautiful-react-hooks/useAudio';
const UseAudioComponent = () => {
const [state, controls] = useAudio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", { autoPlay: true });
const code = JSON.stringify(state, null, '\t');
const Actions = [
<Button onClick={controls.play} shape="round" icon={<PlayCircleFilled />} />,
<Button onClick={controls.pause} shape="round" icon={<PauseCircleFilled />} />,
<Button onClick={controls.mute}>
Mute
</Button>,
<Button onClick={() => controls.setVolume(state.volume + 0.1)}>Vol +1</Button>,
<Button onClick={() => controls.setVolume(state.volume - 0.1)}>Vol -1</Button>,
<Button onClick={() => controls.seek(state.currentTime + 10)}>+10 secs</Button>,
<Button onClick={() => controls.seek(state.currentTime - 10)}>-10 secs</Button>
]
return (
<DisplayDemo title="useAudio" actions={Actions}>
<Typography.Paragraph code>
<pre>
{code}
</pre>
</Typography.Paragraph>
</DisplayDemo>
);
};
<UseAudioComponent />
```
<!-- Types -->
### Types
```typescript static
import { type MutableRefObject } from 'react';
/**
* The useAudio hook wraps the Audio API and provides a set of controls to manage the audio
*/
export declare const useAudio: (src: string, options?: UseAudioOptions) => [AudioState, Readonly<AudioControls>, MutableRefObject<HTMLAudioElement>];
type UseAudioPreloadType = 'auto' | 'metadata' | 'none';
/**
* The interface for the state of the useAudio hook
*/
export interface AudioState {
loop: boolean;
muted: boolean;
volume: number;
duration: number;
autoPlay: boolean;
isPlaying: boolean;
preload?: UseAudioPreloadType;
currentTime: number;
playbackRate: number;
isSrcLoading: boolean | undefined;
}
/**
* The interface for the options of the useAudio hook
*/
export interface UseAudioOptions {
loop?: boolean;
muted?: boolean;
volume?: number;
autoPlay?: boolean;
preload?: UseAudioPreloadType;
playbackRate?: number;
}
/**
* The interface for the controls of the useAudio hook
*/
export interface AudioControls {
play: () => void;
mute: () => void;
pause: () => void;
unmute: () => void;
seek: (time: number) => void;
onError: (onError: ((error: Error) => void)) => void;
setVolume: (volume: number) => void;
}
export default useAudio;
```
<!-- Types:end -->
================================================
FILE: docs/useConditionalTimeout.md
================================================
# useConditionalTimeout
An asynchronous hook which takes in three parameters: a "callback", a "delay time" (in milliseconds), and a boolean value known as "
condition".\
It then postpones the execution of the given callback by the specified delay time, only when the provided condition changes to `true`
### 💡 Why?
- To start a timeout only after a certain condition has been confirmed;
- Handles the executing of the provided callback despite the component's re-rendering;
- Terminates the timeout when the component unmounts (or not, depending on the specified options) and/or when the provided condition is
confirmed;
### Basic Usage:
```jsx harmony
import { useState } from 'react';
import { Button, Space, Typography } from 'antd';
import useConditionalTimeout from 'beautiful-react-hooks/useConditionalTimeout';
const ConditionalDelayedContentComponent = () => {
const [condition, setCondition] = useState(false);
const [showContent, setShowContent] = useState(false);
useConditionalTimeout(() => {
setShowContent(true)
}, 2000, condition);
const Actions = [
<Button type="primary" onClick={() => setCondition(true)} disabled={condition} loading={condition && !showContent}>
{condition ? 'Timer started' : 'Start the timer'}…
</Button>
]
return (
<DisplayDemo title="useConditionalTimeout" actions={Actions}>
<Space direction="vertical">
<Typography.Paragraph>
Click on the following button to change the condition that triggers the 2 seconds timeout to true
</Typography.Paragraph>
<Typography.Paragraph>
After timeout is elapsed a content is displayed
</Typography.Paragraph>
{showContent && <div style={{ fontSize: '3rem' }}>🕰</div>}
</Space>
</DisplayDemo>)
};
<ConditionalDelayedContentComponent />
```
### State & clear method:
The hook will return the state of the timeout (either cleared or not cleared) and a function that may be used to clear it.
```jsx harmony
import { useState } from 'react';
import { Button, Typography } from 'antd';
import useConditionalTimeout from 'beautiful-react-hooks/useConditionalTimeout';
const ConditionalDelayedContentComponent = () => {
const [condition, setCondition] = useState(false);
const [showContent, setShowContent] = useState(false);
const [isCleared, clearTimeoutRef] = useConditionalTimeout(() => {
setShowContent(true)
}, 5000, condition);
const Actions = [
<Button type="primary" onClick={() => setCondition(true)} disabled={condition}>Start a 5 seconds timeout</Button>
]
return (
<DisplayDemo title="useConditionalTimeout" actions={Actions}>
<Typography.Paragraph>Content will show after 5 second starting from the following button click</Typography.Paragraph>
{showContent && <div style={{ fontSize: '3rem' }}>🕰</div>}
{!isCleared && !showContent && <Button onClick={clearTimeoutRef}>Cancel timeout</Button>}
{isCleared && <Typography.Paragraph>Cleared</Typography.Paragraph>}
</DisplayDemo>
)
};
<ConditionalDelayedContentComponent />
```
### Options:
The third parameter is an optional object of options
#### cancelOnUnmount:
Defines whether the timeout should be cleared on unmount.
**default**: `true`
```jsx harmony
import { useState } from 'react';
import { Button } from 'antd';
import useConditionalTimeout from 'beautiful-react-hooks/useConditionalTimeout';
const ConditionalDelayedContentComponent = () => {
const [condition, setCondition] = useState(false);
const [showContent, setShowContent] = useState(false);
const options = { cancelOnUnmount: false };
useConditionalTimeout(() => {
setShowContent(true)
}, 5000, condition, options);
return (
<DisplayDemo title="useConditionalTimeout">
<Button type="primary" onClick={() => setCondition(true)}>Start a 5 seconds timeout</Button>
{showContent && <div style={{ fontSize: '3rem' }}>🕰</div>}
</DisplayDemo>)
};
<ConditionalDelayedContentComponent />
```
#### cancelOnConditionChange:
Defines whether the timeout should be cleared when the condition changes.
In this example, clicking on the button will not trigger any action as there are two instances of useConditionalTimeout, and one of them
will modify the condition.
**default**: `true`
```jsx harmony
import { useState } from 'react';
import { Button } from 'antd';
import useConditionalTimeout from 'beautiful-react-hooks/useConditionalTimeout';
const ConditionalDelayedContentComponent = () => {
const [condition, setCondition] = useState(false);
const [showContent, setShowContent] = useState(false);
useConditionalTimeout(() => {
setShowContent(true)
}, 5000, condition);
useConditionalTimeout(() => {
setCondition(false)
}, 2000, condition);
return (
<DisplayDemo title="useConditionalTimeout">
<Button type="primary" onClick={() => setCondition(true)}>Start a 5 seconds timeout</Button>
{showContent && <div style={{ fontSize: '3rem' }}>🕰</div>}
</DisplayDemo>)
};
<ConditionalDelayedContentComponent />
```
### Mastering the hooks
#### ✅ When to use
- If it is necessary to execute a callback after a specific duration and only when a specific condition has been verified.
<!-- Types -->
### Types
```typescript static
import { type GenericFunction } from './shared/types';
/**
* An async-utility hook that accepts a callback function and a delay time (in milliseconds), then delays the
* execution of the given function by the defined time from when the condition verifies.
*/
declare const useConditionalTimeout: <TCallback extends GenericFunction>(fn: TCallback, milliseconds: number, condition: boolean, options?: UseConditionalTimeoutOptios) => UseConditionalTimeoutReturn;
export interface UseConditionalTimeoutOptios {
cancelOnUnmount?: boolean;
cancelOnConditionChange?: boolean;
}
export type UseConditionalTimeoutReturn = [boolean, () => void];
export default useConditionalTimeout;
```
<!-- Types:end -->
================================================
FILE: docs/useCookie.md
================================================
# useCookie
A hook that facilitates the storage, updating, and deletion of values within
the [CookieStore](https://developer.mozilla.org/en-US/docs/Web/API/CookieStore).
### 💡 Why?
- A quick and safe way to access the `CookieStore` in your React components.
- Improves readability of React components accessing the `CookieStore
### Basic Usage:
```jsx harmony
import { useCallback } from 'react';
import { Typography, Tag, Button } from 'antd';
import useCookie from 'beautiful-react-hooks/useCookie';
const UseCookieExample = () => {
const { onError, cookieValue, deleteCookie, updateCookie } = useCookie('cookie-key', {
secure: false,
path: '/',
defaultValue: 'default-value'
});
onError((error) => {
console.log(error)
alert(error.message)
})
const updateButtonClick = useCallback(() => {
updateCookie('new-cookie-value')
}, [])
const deleteButtonClick = useCallback(() => {
deleteCookie()
}, [])
const Actions = [
<Button type="primary" onClick={updateButtonClick}>
Update the cookieStore
</Button>,
<Button onClick={deleteButtonClick}>
Clear the cookieStore
</Button>
]
return (
<DisplayDemo title="useCookie" actions={Actions}>
<Typography.Paragraph>
Click on the button to update or clear the cookieStore
</Typography.Paragraph>
<Tag color="blue">
{cookieValue || 'no value'}
</Tag>
</DisplayDemo>
)
};
<UseCookieExample />
```
### Mastering the hooks
#### ✅ When to use
- When you need to CRUD values from the `CookieStore`
#### 🛑 When not to use
- in server-only components (during SSR)
<!-- Types -->
### Types
```typescript static
import { type CallbackSetter } from './shared/types';
declare const useCookie: (key: string, options?: UseCookieOptions) => Readonly<UseCookieReturn>;
export declare enum CookieSameSite {
STRICT = "strict",
LAX = "lax",
NONE = "none"
}
interface CookieStoreDeleteOptions {
name?: string;
domain?: string;
path?: string;
}
interface CookieBase extends CookieStoreDeleteOptions {
sameSite?: CookieSameSite;
}
export interface UseCookieOptions extends CookieBase {
defaultValue?: string;
}
export interface UseCookieReturn {
cookieValue?: string;
updateCookie: (nextValue: string) => Promise<void>;
deleteCookie: () => Promise<void>;
onError: CallbackSetter<Error>;
}
export default useCookie;
```
<!-- Types:end -->
================================================
FILE: docs/useDarkMode.md
================================================
# useDarkMode
A hook that manages all the necessary operations to incorporate a toggle switch for dark and light modes on your website
### 💡 Why?
- Keep information about dark/light mode consistent and in sync across sessions using localStorage
- Return the methods that allows you to change into dark/light mode
- Safely read information about the dark/light mode from user's operating system using `prefers-color-scheme`
### Basic Usage:
```jsx harmony
import { Typography, Tag, Button } from 'antd';
import useDarkMode from 'beautiful-react-hooks/useDarkMode';
const UseDarkModeExample = () => {
const { toggle, enable, disable, isDarkMode } = useDarkMode();
const Actions = [
<Button type='primary' onClick={enable}>
Enable dark mode
</Button>,
<Button onClick={disable}>
Disable dark mode
</Button>,
<Button onClick={toggle}>
Toggle dark mode
</Button>
]
return (
<DisplayDemo title="useDarkMode" actions={Actions}>
<Typography.Paragraph>Click on the buttons to update isDarkMode flag</Typography.Paragraph>
<Typography.Paragraph>isDarkMode: <Tag>{isDarkMode ? 'true' : 'false'}</Tag></Typography.Paragraph>
</DisplayDemo>
);
};
<UseDarkModeExample />
```
### Mastering the hooks
#### 🛑 When not to use
- in server-only components (during SSR)
<!-- Types -->
### Types
```typescript static
export declare const LOCAL_STORAGE_KEY = "beautiful-react-hooks-is-dark-mode";
declare const useDarkMode: (defaultValue?: boolean, localStorageKey?: string) => Readonly<UseDarkModeReturn>;
export interface UseDarkModeReturn {
isDarkMode: boolean;
toggle: () => void;
enable: () => void;
disable: () => void;
}
export default useDarkMode;
```
<!-- Types:end -->
================================================
FILE: docs/useDebouncedCallback.md
================================================
# useDebouncedCallback
A hook that accepts a `function` parameter and produces a new memoized variant of that function which postpones its invocation by the
specified duration.\
In case the duration is not specified, it will be set to the default value of 600ms.\
This hook is built on top of the `lodash.debounce` function. For further details, kindly refer to
the [Lodash documentation](https://lodash.com/docs/#debounce).
### Why? 💡
- To take full control over frequency at which a function can execute, independent of the number of renders performed by the component
### Basic Usage
```jsx harmony
import { useEffect, useState } from 'react';
import { Typography, Alert, Space, Tag } from 'antd';
import useDebouncedCallback from 'beautiful-react-hooks/useDebouncedCallback';
import useWindowResize from 'beautiful-react-hooks/useWindowResize';
const DebouncedFnComponent = () => {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const onWindowResize = useWindowResize();
// there's no need to use `useCallback` since the returned function
// is already memoized
const onWindowResizeHandler = useDebouncedCallback(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
});
onWindowResize(onWindowResizeHandler);
useEffect(() => {
// do something
// don't forget to cancel debounced
return () => onWindowResizeHandler.cancel(); // or .flush()
});
return (
<DisplayDemo title="useDebounceCallback">
<Space direction="vertical" size="middle">
<Alert type="info" message="Resize the browser window and see the update taking effect after the designated delay" showIcon />
<Typography.Paragraph>
window width: <Tag color="green">{width}</Tag><br />
window height: <Tag color="green">{height}</Tag>
</Typography.Paragraph>
</Space>
</DisplayDemo>
);
};
<DebouncedFnComponent />
```
### Dependencies
Since `useDebouncedCallback` uses [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)
under the hood, you can possibly define the callback dependencies.
```jsx harmony
import { useState } from 'react';
import { Typography, Alert, Space, Tag } from 'antd';
import useDebouncedCallback from 'beautiful-react-hooks/useDebouncedCallback';
import useWindowResize from 'beautiful-react-hooks/useWindowResize';
const DebouncedFnComponent = (props) => {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const onWindowResize = useWindowResize();
// there's no need to use `useCallback` since the returned function
// is already memoized
const onWindowResizeHandler = useDebouncedCallback(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, [setWidth, setHeight]);
onWindowResize(onWindowResizeHandler);
return (
<DisplayDemo title="useDebounceCallback">
<Space direction="vertical" size="middle">
<Alert type="info" message="Resize the browser window and see the update taking effect after the designated delay" showIcon />
<Typography.Paragraph>
window width: <Tag color="green">{width}</Tag><br />
window height: <Tag color="green">{height}</Tag>
</Typography.Paragraph>
</Space>
</DisplayDemo>
);
};
<DebouncedFnComponent foo="bar" />
```
### Debounce time
A custom debounce time can be easily defined as follows (500ms)
```jsx harmony
import { useState } from 'react';
import { Typography, Alert, Space, Tag } from 'antd';
import useDebouncedCallback from 'beautiful-react-hooks/useDebouncedCallback';
import useWindowResize from 'beautiful-react-hooks/useWindowResize';
const DebouncedFnComponent = (props) => {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const onWindowResize = useWindowResize();
// there's no need to use `useCallback` since the returned function
// is already memoized
const onWindowResizeHandler = useDebouncedCallback(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, [setWidth, setHeight], 500);
onWindowResize(onWindowResizeHandler);
return (
<DisplayDemo title="useDebounceCallback">
<Space direction="vertical" size="middle">
<Alert type="info" message="Resize the browser window and see the update taking effect after the designated delay" showIcon />
<Typography.Paragraph>
window width: <Tag color="green">{width}</Tag><br />
window height: <Tag color="green">{height}</Tag>
</Typography.Paragraph>
</Space>
</DisplayDemo>
);
};
<DebouncedFnComponent foo="bar" />
```
### Options
Since `useDebouncedCallback` uses [lodash.debounce](https://www.npmjs.com/package/lodash.debounce); under the hood, you can possibly define
few options to customise its behaviour.
```jsx harmony
import { useState } from 'react';
import { Typography, Alert, Space, Tag } from 'antd';
import useDebouncedCallback from 'beautiful-react-hooks/useDebouncedCallback';
import useWindowResize from 'beautiful-react-hooks/useWindowResize';
const DebouncedFnComponent = () => {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const onWindowResize = useWindowResize()
const options = {
leading: false,
trailing: true,
};
// there's no need to use `useCallback` since the returned function
// is already memoized
const onWindowResizeHandler = useDebouncedCallback(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, [setWidth, setHeight], 500, options);
onWindowResize(onWindowResizeHandler);
return (
<DisplayDemo title="useDebounceCallback">
<Space direction="vertical" size="middle">
<Alert type="info" message="Resize the browser window and see the update taking effect after the designated delay" showIcon />
<Typography.Paragraph>
window width: <Tag color="green">{width}</Tag><br />
window height: <Tag color="green">{height}</Tag>
</Typography.Paragraph>
</Space>
</DisplayDemo>
);
};
<DebouncedFnComponent />
```
#### ✅ Pro tip:
To deep understanding the differences between `throttle` and `debounce`, what they are and when to use them please
read "[Debouncing and Throttling Explained Through Examples](https://css-tricks.com/debouncing-throttling-explained-examples/)"
by [David Corbacho](https://twitter.com/dcorbacho)
<!-- Types -->
### Types
```typescript static
/// <reference types="lodash" />
import { type DependencyList } from 'react';
import { type GenericFunction } from './shared/types';
export interface DebounceOptions {
leading?: boolean | undefined;
maxWait?: number | undefined;
trailing?: boolean | undefined;
}
/**
* Accepts a function and returns a new debounced yet memoized version of that same function that delays
* its invoking by the defined time.
* If time is not defined, its default value will be 250ms.
*/
declare const useDebouncedCallback: <TCallback extends GenericFunction>(fn: TCallback, dependencies?: DependencyList, wait?: number, options?: DebounceOptions) => import("lodash").DebouncedFunc<TCallback>;
export default useDebouncedCallback;
```
<!-- Types:end -->
================================================
FILE: docs/useDefaultedState.md
================================================
# useDefaultedState
A hook that functions similar to `useState`, with the added capability to receive a defaultValue and potentially an initialState.\
This hook guarantees that the state returned is always set to defaultValue in the event of it being null or undefined.
### Why? 💡
- Avoids side-effects by ensuring a default state value
### Basic Usage:
```jsx harmony
import { Typography, Button } from 'antd';
import useDefaultedState from 'beautiful-react-hooks/useDefaultedState';
/**
* useDefaultedState example component
*/
const DefaultedStateExample = () => {
const placeholder = { name: 'John Doe' };
const data = { name: 'Antonio Rù' };
const [user, setUser] = useDefaultedState(placeholder, data);
const Actions = [
<Button type="primary" onClick={() => setUser()}>Change to 'undefined'</Button>,
]
return (
<DisplayDemo title="useDefaultedState" actions={Actions}>
<Typography.Paragraph>The user name is: {user.name}</Typography.Paragraph>
</DisplayDemo>
);
};
<DefaultedStateExample />
```
### Mastering the hook
#### ✅ When to use
- If you require a secure state that must never be null or undefined
<!-- Types -->
### Types
```typescript static
/**
* Returns a safe state by making sure the given value is not null or undefined
*/
declare const useDefaultedState: <TValue>(defaultValue: TValue, initialState?: TValue | undefined) => [TValue, (nextState: TValue) => void];
export default useDefaultedState;
```
<!-- Types:end -->
================================================
FILE: docs/useDidMount.md
================================================
# useDidMount
A hook that takes in a function to execute when the component has finished mounting.
### Why? 💡
- takes care of performing a callback when the component mounts
- Is intended as a shortcut to `useEffect(onMount, [])`
### Basic Usage:
```jsx harmony
import { useState } from 'react';
import { Typography } from 'antd';
import useDidMount from 'beautiful-react-hooks/useDidMount';
const ComponentDidMount = () => {
const [mounted, setIsMounted] = useState(false);
useDidMount(() => {
const timeout = setTimeout(() => {
setIsMounted(true);
clearTimeout(timeout);
}, 1000);
});
return (
<DisplayDemo title="useDidMount">
{mounted && (<Typography.Paragraph>Component did mount!</Typography.Paragraph>)}
</DisplayDemo>
);
};
<ComponentDidMount />
```
### Callback setter syntax:
if the first parameter is not provided, the returned function (*a callback setter*) can be used to set the `useDidMount` handler, as long as
it is immediately invoked.
**Please note**: the returned callback setter is meant to change the value of the callback reference only, it does not cause the component
rerender nor should not be invoked asynchronously.
```jsx harmony
import { useState } from 'react';
import { Typography } from 'antd';
import useDidMount from 'beautiful-react-hooks/useDidMount';
const ComponentDidMount = () => {
const [mounted, setIsMounted] = useState(false);
const onMount = useDidMount();
onMount(() => {
const timeout = setTimeout(() => {
setIsMounted(true);
clearTimeout(timeout);
}, 1000);
});
return (
<DisplayDemo title="useDidMount">
{mounted && (<Typography.Paragraph>Component did mount!</Typography.Paragraph>)}
</DisplayDemo>
);
};
<ComponentDidMount />
```
#### ✅ Pro tip:
When using a React function component you should not really think of it in terms of "lifecycle".
The `useDidMount` hook is indeed intended as a shortcut to `useEffect(onMount, [])`.
To deep understanding `useEffect`, what it is and how it should be properly used, please read
"[A complete guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)"
by [Dan Abramov](https://twitter.com/dan_abramov)
### Mastering the hook
#### ✅ When to use
- When in need of performing a function after the component mounts
#### 🛑 When not to use
- You can't use it asynchronously since this will break the [rules of hooks](https://reactjs.org/docs/hooks-rules.html)
- If using the callback setter, it should not be used asynchronously but immediately invoked
<!-- Types -->
### Types
```typescript static
import { type GenericFunction, type Noop } from './shared/types';
/**
* Returns a callback setter for a function to be performed when the component did mount.
*/
declare const useDidMount: <TCallback extends GenericFunction = Noop>(callback?: TCallback | undefined) => import("./shared/types").CallbackSetter<undefined>;
export default useDidMount;
```
<!-- Types:end -->
================================================
FILE: docs/useDrag.md
================================================
# useDrag
A hook that receives a reference to an HTML Element (using React's useRef) and enables it to be dragged.\
The hook returns a boolean value indicating whether the element is currently being dragged or not.
### Why? 💡
- takes care of attaching drag-related event listeners to the specified target
- takes care of emoving the listener when the component is unmounted.
- allow to easily implement draggable business logic
### Basic Usage:
Provide a DOM ref as first parameter to `useDrag`
```jsx harmony
import { useRef } from 'react';
import useDrag from 'beautiful-react-hooks/useDrag';
const MyComponent = () => {
const ref = useRef();
const isDragged = useDrag(ref);
return (
<DisplayDemo title="useDrag">
<div ref={ref} style={{ padding: '20px 0', background: isDragged ? '#BE496E' : '#1D6C8B' }}>
Draggable item...
{isDragged && <span>is being dragged</span>}
</div>
</DisplayDemo>
);
};
<MyComponent />
```
### Drag image:
```jsx harmony
import { useRef } from 'react';
import useDrag from 'beautiful-react-hooks/useDrag';
const MyComponent = () => {
const ref = useRef();
const isDragged = useDrag(ref, {
dragImage: 'https://beautifulinteractions.com/img/logo-colorful.svg',
dragImageXOffset: 5,
dragImageYOffset: 5,
});
return (
<DisplayDemo title="useDrag">
<div ref={ref} style={{ padding: '20px 0', background: isDragged ? '#BE496E' : '#1D6C8B' }}>
Draggable item...
{isDragged && <span>is being dragged</span>}
</div>
</DisplayDemo>
);
};
<MyComponent />
```
### Data transfer:
```jsx harmony
import { useRef } from 'react';
import useDrag from 'beautiful-react-hooks/useDrag';
const MyComponent = () => {
const ref = useRef();
const isDragged = useDrag(ref, {
transfer: { id: 'item-id', foo: 'bar' },
transferFormat: 'text/plain',
});
return (
<DisplayDemo title="useDrag">
<div ref={ref} style={{ padding: '20px 0', background: isDragged ? '#BE496E' : '#1D6C8B' }}>
Draggable item...
{isDragged && <span>is being dragged</span>}
</div>
</DisplayDemo>
);
};
<MyComponent />
```
### Mastering the hook
#### ✅ When to use
- If you require basic drag-related business logic
<!-- Types -->
### Types
```typescript static
import { type RefObject } from 'react';
export interface UseDragOptions {
dragImage?: string;
dragImageXOffset?: number;
dragImageYOffset?: number;
transfer?: string | number | Record<string, any>;
transferFormat?: string;
}
declare const useDrag: <TElement extends HTMLElement>(targetRef: RefObject<TElement>, options?: UseDragOptions) => boolean;
export default useDrag;
```
<!-- Types:end -->
================================================
FILE: docs/useDragEvents.md
================================================
# useDragEvents
A hook that provides a collection of functions designed to simplify the management of drag-related events.\
It takes a reference to target element where the events are to be attached.\
This hook facilitates the handling of drag events, making it easier for developers to incorporate drag-and-drop functionality into their web
applications.
**Please note:** the returned callback setters should be invoked immediately in the function component's body, do not try to call this
functions asynchronously.
### Why? 💡
- Takes care of attaching the drag-related event listeners to the specified target element
- Automatically removes the event listeners when the component is unmounted
- Enables the ability to abstract the handling of drag-related events
### Basic Usage:
Provide a DOM element ref as first parameter to `useDragEvents`
```jsx harmony
import { useRef, useState } from 'react';
import useDragEvents from 'beautiful-react-hooks/useDragEvents';
const MyComponent = () => {
const ref = useRef();
const [isDragged, setIsDragged] = useState(false);
const { onDragStart, onDragEnd } = useDragEvents(ref);
onDragStart((event) => {
setIsDragged(true);
});
onDragEnd((event) => {
setIsDragged(false);
});
return (
<DisplayDemo title="useDragEvents">
<div ref={ref} style={{ padding: '20px 0', background: '#1D6C8B' }}>
Draggable item...
{isDragged && <span>is being dragged</span>}
</div>
</DisplayDemo>
);
};
<MyComponent />
```
### Draggable attribute:
the second parameter determines whether the target element should have the `draggable` attribute set. By default, this is set to `true`.
**Please note**:
The following code is meant to be just as an example, **do not use this hooks to substitute the standard props approach**, please
read [mastering the hook](#Mastering_the_hook) below.
```jsx harmony
import { useRef, useState } from 'react';
import useDragEvents from 'beautiful-react-hooks/useDragEvents';
const MyComponent = () => {
const draggableRef = useRef();
const dropzoneRef = useRef();
const [droppedTimes, setDroopedTimes] = useState(0);
const [isDragged, setIsDragged] = useState(false);
const { onDragStart, onDragEnd } = useDragEvents(draggableRef);
const { onDrop, onDragOver } = useDragEvents(dropzoneRef, false);
onDragStart((event) => {
setIsDragged(true);
});
onDragEnd((event) => {
setIsDragged(false);
});
onDragOver((event) => {
event.preventDefault();
});
onDrop((event) => {
setDroopedTimes(1 + droppedTimes);
});
return (
<DisplayDemo title="useDragEvents">
<div ref={draggableRef} style={{ padding: '20px 0', background: '#1D6C8B' }}>
Draggable item...
{isDragged && <span>is being dragged</span>}
</div>
<div ref={dropzoneRef} style={{ padding: '20px 0', marginTop: '20px', background: '#BE496E' }}>
Drop zone!
Dropped items: {droppedTimes}
</div>
</DisplayDemo>
);
};
<MyComponent />
```
### Mastering the hook
#### ✅ When to use
- If in need to abstract some drag-n-drop related logic into a custom hooks
#### 🛑 What not to do
- Using the returned callback setter asynchronously won't have any effect and could introduce bugs into your code, so it should be avoided.
- Standard drag handler props (like `onDragStart`) should not be replaced with useDragEvents callback setters.
- useDragEvents is designed to be used for more complex hooks that require control over drag and drop.
- Replacing classic props with useDragEvents handlers can lead to a loss in performance due to the lack of React SyntheticEvent support.
- If you were already using a method similar to the following, it is recommended to continue doing so:
```jsx harmony static noedit
const MyComponent = (props) => {
const { dragStartHandler } = props;
return (
<div onDragStart={dragStartHandler} />
);
};
```
<!-- Types -->
### Types
```typescript static
import { type RefObject } from 'react';
import { type CallbackSetter } from './shared/types';
export interface UseDragEventsResult {
onDrag: CallbackSetter<DragEvent>;
onDrop: CallbackSetter<DragEvent>;
onDragEnter: CallbackSetter<DragEvent>;
onDragEnd: CallbackSetter<DragEvent>;
onDragExit: CallbackSetter<DragEvent>;
onDragLeave: CallbackSetter<DragEvent>;
onDragOver: CallbackSetter<DragEvent>;
onDragStart: CallbackSetter<DragEvent>;
}
/**
* Returns an object of callback setters to handle the drag-related events.
* It accepts a DOM ref representing the events target (where attach the events to).
*
* Returned callback setters: `onDrag`, `onDrop`, `onDragEnter`, `onDragEnd`, `onDragExit`, `onDragLeave`,
* `onDragOver`, `onDragStart`;
*/
declare const useDragEvents: <TElement extends HTMLElement>(targetRef: RefObject<TElement>, isDraggable?: boolean) => Readonly<UseDragEventsResult>;
export default useDragEvents;
```
<!-- Types:end -->
================================================
FILE: docs/useDropZone.md
================================================
# useDropZone
A hook that receives an HTML Element ref and transforms it into a drop-zone capable of accepting data from a dragged object
### Why? 💡
- Handles the addition of drop-related event listeners to the specified target
- Cleans up the listener upon component unmounting
- Facilitates the implementation of drop-related business logic
### Basic Usage:
Provide a DOM ref as first parameter to `useDropZone`
```jsx harmony
import { useState, useRef } from 'react';
import useDrag from 'beautiful-react-hooks/useDrag';
import useDropZone from 'beautiful-react-hooks/useDropZone';
const MyComponent = () => {
const dragRef = useRef();
const dropRef = useRef();
const isDragged = useDrag(dragRef, { transfer: { data: 'foo' }, transferFormat: 'text' });
const { isOver, onDrop } = useDropZone(dropRef);
const [data, setData] = useState();
onDrop((event) => {
event.preventDefault();
const nextData = event.dataTransfer.getData('text');
setData(nextData);
});
return (
<DisplayDemo title="useDropZone">
<div ref={dragRef} style={{ padding: '20px 0', background: isDragged ? '#BE496E' : '#1D6C8B' }}>
{!isDragged && <span>Drag to send data</span>}
{isDragged && <span>is being dragged</span>}
</div>
<div ref={dropRef} style={{ padding: '20px 0', marginTop: '4rem', background: isOver ? '#BE496E' : 'white' }}>
{!data && 'Drop here to receive data'}
{data && `Received: ${data}`}
</div>
</DisplayDemo>
);
};
<MyComponent />
```
### Mastering the hook
#### ✅ When to use
- If in need to abstract some drag-n-drop related logic into a custom hooks
#### 🛑 What not to do
- Using the returned callback setter asynchronously won't have any effect and could introduce bugs into your code, so it should be avoided.
- Standard drag handler props (like `onDragStart`) should not be replaced with useDragEvents callback setters.
- useDragEvents is designed to be used for more complex hooks that require control over drag and drop.
- Replacing classic props with useDragEvents handlers can lead to a loss in performance due to the lack of React SyntheticEvent support.
- If you were already using a method similar to the following, it is recommended to continue doing so:
```jsx harmony static noedit
const MyComponent = (props) => {
const { dragStartHandler } = props;
return (
<div onDragStart={dragStartHandler} />
);
};
```
<!-- Types -->
### Types
```typescript static
import { type RefObject } from 'react';
import { type CallbackSetter } from './shared/types';
export interface UseDropZoneResult {
readonly isOver: boolean;
readonly onDrop: CallbackSetter<DragEvent>;
}
declare const useDropZone: <TElement extends HTMLElement>(targetRef: RefObject<TElement>) => Readonly<UseDropZoneResult>;
export default useDropZone;
```
<!-- Types:end -->
================================================
FILE: docs/useEvent.md
================================================
# useEvent
A hook that allows you to specify an HTML element and an event name. It sets up a listener so that when that event happens on that element,
your code will be notified and can take action. Essentially, it lets you "listen" for events on a specific HTML element
### Why? 💡
- Automatically adds the event listener to the element, so you don't have to do it manually
- Automatically removes the event listener when the component unmounts
### Basic Usage:
`useEvents` returns a callback setter for the defined event to be immediately invoked.
**Please note**: the callback setter is only meant to change the callback reference, it does not cause the component rerender unless
differently specified in the function's body. It's not invoked asynchronously
```jsx harmony
import { useState, useRef } from 'react';
import useEvent from 'beautiful-react-hooks/useEvent';
const TestComponent = () => {
const targetRef = useRef()
const [clicksNo, setClicksNo] = useState(0)
const onTargetClick = useEvent(targetRef, 'click');
onTargetClick((event) => {
setClicksNo(clicksNo + 1);
});
return (
<DisplayDemo title="useEvent">
<div ref={targetRef}>
Click on this text to increase the number of clicks: {clicksNo}
</div>
</DisplayDemo>
);
};
<TestComponent />
```
### Options:
Since `useEvent` uses [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
under the hood, it's possible to specify the listener characteristics by passing an options object as third parameter.
```jsx harmony
import { useState, useRef } from 'react';
import useEvent from 'beautiful-react-hooks/useEvent';
const TestComponent = () => {
const targetRef = useRef()
const [clicksNo, setClicksNo] = useState(0)
const onTargetClick = useEvent(targetRef, 'click', {
capture: true,
passive: true,
once: true
});
onTargetClick((event) => {
setClicksNo(clicksNo + 1);
});
return (
<DisplayDemo title="useEvent">
<div ref={targetRef}>
Click on this text to increase the number of clicks: {clicksNo}
</div>
</DisplayDemo>
);
};
<TestComponent />
```
### Mastering the hook
#### ✅ When to use
- When in need of listening to a specific event from an HTMLElement
#### 🛑 What not to do
- When you can archive the same result by using a callback, **please remember listening/firing events directly to/from HTMLElement(s) in
React is considered an anti-pattern**
- You can't use the returned callback setter asynchronously, it will not have any effect but changing the handler possibly leading to bugs
in your code
<!-- Types -->
### Types
```typescript static
import { type RefObject } from 'react';
/**
* Accepts the reference to an HTML Element and an event name then performs the necessary operations to listen to the event
* when fired from that HTML Element.
*/
declare const useEvent: <TEvent extends Event, TElement extends HTMLElement = HTMLElement>(ref: RefObject<TElement>, eventName: string, options?: AddEventListenerOptions) => import("./shared/types").CallbackSetter<TEvent>;
export default useEvent;
```
<!-- Types:end -->
================================================
FILE: docs/useGeolocation.md
================================================
# useGeolocation
A hook that does the job of two - now that's efficiency! This nifty little function returns an array with two elements: the first being the
geolocation state from our trusty [useGeolocationState](./useGeolocationState) hook, and the second being an object of callback setters
from [useGeolocationEvents](./useGeolocationEvents).
It is intended as a shortcut to those hooks.
### Why? 💡
- facilitates streamlined access to
the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API), which allows for
geolocation tracking and position updates
- manages the addition of geolocation event listeners, ensuring that events related to the user's location are properly handled.
- automatically cleans up the event listener when the component is unmounted, preventing potential memory leaks and optimizing performance
- enables the abstraction of geolocation-related events, allowing for more flexible and scalable code implementation
### Basic Usage:
```jsx harmony
import { Typography } from 'antd';
import useGeolocation from 'beautiful-react-hooks/useGeolocation';
const PositionReporter = () => {
const [geoState, { onChange }] = useGeolocation();
onChange(() => {
console.log('Position changed...');
});
return (
<DisplayDemo title="useGeolocation">
<Typography.Title>The current position is:</Typography.Title>
{geoState.isRetrieving && (<Typography.Paragraph>Retrieving position...</Typography.Paragraph>)}
{geoState.isSupported && geoState.position && [
<Typography.Paragraph key={0}>Lat: {geoState.position.coords.latitude}</Typography.Paragraph>,
<Typography.Paragraph key={1}>Lng: {geoState.position.coords.longitude}</Typography.Paragraph>
]}
</DisplayDemo>
);
};
<PositionReporter />
```
### Options:
Before using, please read about the [geolocation options](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions)
```jsx harmony
import { Typography } from 'antd';
import useGeolocation from 'beautiful-react-hooks/useGeolocation';
const PositionReporter = () => {
const [geoState, { onChange }] = useGeolocation({
enableHighAccuracy: true,
timeout: 0xFFFFFFFF,
maximumAge: 0,
});
onChange(() => {
console.log('Position changed...');
});
return (
<DisplayDemo title="useGeolocation">
<Typography.Title>The current position is:</Typography.Title>
{geoState.isRetrieving && (<Typography.Paragraph>Retrieving position...</Typography.Paragraph>)}
{geoState.isSupported && geoState.position && [
<Typography.Paragraph key={0}>Lat: {geoState.position.coords.latitude}</Typography.Paragraph>,
<Typography.Paragraph key={1}>Lng: {geoState.position.coords.longitude}</Typography.Paragraph>
]}
</DisplayDemo>
);
};
<PositionReporter />
```
### Mastering the hook
#### ✅ When to use
- Use this hook when you require effortless access to the Geolocation API
#### 🛑 What not to do
- Do not utilize this hook to speculate the user's device capabilities.
- Prior to accessing the geolocation state, ensure to verify the isSupported flag.
<!-- Types -->
### Types
```typescript static
import { type UseGeolocationStateResult } from './useGeolocationState';
import { type UseGeolocationEventsResult } from './useGeolocationEvents';
/**
* Returns an array where the first item is the geolocation state from the `useGeolocationState` hook and the
* second one is the object of callback setters from the `useGeolocationEvents` hook.
* It is intended as a shortcut to those hooks.
*/
declare const useGeolocation: (options?: PositionOptions) => [UseGeolocationStateResult, UseGeolocationEventsResult];
export default useGeolocation;
```
<!-- Types:end -->
================================================
FILE: docs/useGeolocationEvents.md
================================================
# useGeolocationEvents
A hook that returns an object of callback setters (functions to set the callback that will be performed once an event is fired)
to handle geolocation-related events. So far, the supported methods are:
- onChange, invoked when the position changes
- onError, invoked when an error occurs while retrieving the position.
The returned object also contains the `isSupported boolean flag, reporting whether the geolocation API is supported.
**Please note**: the returned callback setters should be invoked immediately in the function component's body. Do not try to call these
functions asynchronously.
### Why? 💡
- Manages the addition of geolocation event listeners
- Handles the cleaning of the listeners when the component unmounts
- Enables the creation of abstractions for geolocation-related events
### Basic Usage:
```jsx harmony
import { useState } from 'react';
import { Typography } from 'antd';
import useGeolocationEvents from 'beautiful-react-hooks/useGeolocationEvents';
const GeoReporter = () => {
const [position, setGeoPosition] = useState();
const [error, setError] = useState();
const { isSupported, onChange, onError } = useGeolocationEvents({ enableHighAccuracy: true });
onChange((geoPosition) => setGeoPosition(geoPosition));
onError((err) => setError(err));
return (
<DisplayDemo title="useGeolocationEvents">
<Typography.Text>Geolocation supported: {isSupported ? 'yes' : 'no'}</Typography.Text>
{!error && position && (
<Typography.Text>lat: {position.coords.latitude}, lng: {position.coords.longitude}</Typography.Text>
)}
</DisplayDemo>
);
};
<GeoReporter />
```
### Mastering the hook
#### ✅ When to use
- Use this hook when you need to abstract geolocation-related logic into a custom hook
#### 🛑 What not to do
- Do not use the returned callback setter asynchronously. Doing so will have no effect and may cause bugs in your code. Instead, be sure to
invoke the callback setters immediately in the function component's body
<!-- Types -->
### Types
```typescript static
import { type BRHGeolocationPosition, type BRHGeolocationPositionError } from './shared/types';
export interface UseGeolocationEventsResult {
isSupported: boolean;
onChange: (callback: (position: BRHGeolocationPosition) => void) => void;
onError: (callback: (error: BRHGeolocationPositionError) => void) => void;
}
/**
* Returns a frozen object of callback setters to handle the geolocation events.<br/>
* So far, the supported methods are: `onChange`, invoked when the position changes and `onError`, invoked when
* an error occur while retrieving the position.<br/>
* The returned object also contains the `isSupported` boolean flag reporting whether the geolocation API is supported.
*/
declare const useGeolocationEvents: (options?: PositionOptions) => Readonly<UseGeolocationEventsResult>;
export default useGeolocationEvents;
```
<!-- Types:end -->
================================================
FILE: docs/useGeolocationState.md
================================================
# useGeolocationState
A hook that returns an object comprising information on the response from
the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API). \
This object properties are:
- the `position` information, which is the actual response from the geolocation API
- the `isSupported` boolean flag, indicating whether the geolocation API is supported or not
- the `isRetrieving` boolean flag, indicating whether the hook is currently retrieving the position or not
- the `onError` function, invoked when an error occurs while retrieving the position
It also accepts a [geolocation options object](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) to be utilized as a
parameter while utilizing the `Geolocation.getCurrentPosition()` method.
### Why? 💡
- facilitates streamlined access to
the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API), which allows for
geolocation tracking and position updates
- enables the abstraction of geolocation-related events, allowing for more flexible and scalable code implementation
### Basic Usage:
```jsx harmony
import { Typography } from 'antd';
import useGeolocationState from 'beautiful-react-hooks/useGeolocationState';
const PositionReporter = () => {
const { isSupported, isRetrieving, position, onError } = useGeolocationState();
onError((error) => {
alert(error.message);
});
return (
<DisplayDemo title="useGeolocationState">
<Typography.Title>The current position is:</Typography.Title>
{geoState.isRetrieving && (<Typography.Paragraph>Retrieving position...</Typography.Paragraph>)}
{geoState.isSupported && geoState.position && [
<Typography.Paragraph key={0}>Lat: {geoState.position.coords.latitude}</Typography.Paragraph>,
<Typography.Paragraph key={1}>Lng: {geoState.position.coords.longitude}</Typography.Paragraph>
]}
</DisplayDemo>
);
};
<PositionReporter />
```
### Options:
Read more on the [geolocation options documentation](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions)
```jsx harmony
import useGeolocationState from 'beautiful-react-hooks/useGeolocationState';
const PositionReporter = () => {
const { isSupported, isRetrieving, position, onError } = useGeolocationState({
enableHighAccuracy: true,
timeout: 0xFFFFFFFF,
maximumAge: 0,
});
onError((error) => {
alert(error.message);
});
return (
<DisplayDemo title="useGeolocationState">
<Typography.Title>The current position is:</Typography.Title>
{geoState.isRetrieving && (<Typography.Paragraph>Retrieving position...</Typography.Paragraph>)}
{geoState.isSupported && geoState.position && [
<Typography.Paragraph key={0}>Lat: {geoState.position.coords.latitude}</Typography.Paragraph>,
<Typography.Paragraph key={1}>Lng: {geoState.position.coords.longitude}</Typography.Paragraph>
]}
</DisplayDemo>
);
};
<PositionReporter />
```
### Mastering the hook
#### ✅ When to use
- Use this hook when you require effortless access to the Geolocation API
#### 🛑 What not to do
- Do not utilize this hook to speculate the user's device capabilities.
- Prior to accessing the geolocation state, ensure to verify the isSupported flag.
<!-- Types -->
### Types
```typescript static
import { type BRHGeolocationPosition, type BRHGeolocationPositionError, type SomeCallback } from './shared/types';
export interface GeolocationState {
readonly isSupported: boolean;
readonly isRetrieving: boolean;
readonly position: BRHGeolocationPosition;
}
export interface UseGeolocationStateResult extends GeolocationState {
onError: (callback: SomeCallback<BRHGeolocationPositionError>) => void;
}
/**
* Returns a frozen object containing the `position` object, the `isSupported` boolean flag, reporting whether the
* geolocation API is supported or not and the `isRetrieving` boolean flag reporting whether the hook is fetching the
* current position.
* The position is retrieved by using the
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API),
* when supported.<br/><br />
* It possibly accepts an object of [geolocation options]
* (https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) to be used as parameter when using the
* `Geolocation.getCurrentPosition()` method.
*/
declare const useGeolocationState: (options?: PositionOptions) => Readonly<UseGeolocationStateResult>;
export default useGeolocationState;
```
<!-- Types:end -->
================================================
FILE: docs/useGlobalEvent.md
================================================
# useGlobalEvent
A hook that streamlines event handling in your application, ensuring that event listeners are added and removed at the appropriate times,
without requiring you to manage them manually.\
Simply provide the name of the event you want to attach to the `window` object, and the hook will take care of the rest.
### Why? 💡
- Simplifies the process of adding a listener for a specific event to the `window` object.
- Automates the removal of the listener when the component is unmounted.
### Basic Usage:
```jsx harmony
import { useState } from 'react';
import { Typography, Alert, Tag, Space } from 'antd';
import useGlobalEvent from 'beautiful-react-hooks/useGlobalEvent';
const TestComponent = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const onWindowResize = useGlobalEvent('resize');
onWindowResize((event) => {
setWindowWidth(window.innerWidth);
});
return (
<DisplayDemo title="useGlobalEvent">
<Space direction="vertical" size="middle">
<Alert type="info" message="Resize the browser window to update the state" showIcon />
<Typography.Paragraph>
window width: <Tag color="green">{windowWidth}</Tag><br />
</Typography.Paragraph>
</Space>
</DisplayDemo>
);
};
<TestComponent />
```
### Options:
Since `useGlobalEvent` uses [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
under the hood, it's possible to specify the listener characteristics by passing an options object as second parameter.
```jsx harmony
import { useState } from 'react';
import { Typography, Alert, Tag, Space } from 'antd';
import useGlobalEvent from 'beautiful-react-hooks/useGlobalEvent';
const TestComponent = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const options = { capture: true, passive: true, once: true };
const onWindowResize = useGlobalEvent('resize', options);
onWindowResize((event) => {
setWindowWidth(window.innerWidth);
});
return (
<DisplayDemo title="useGlobalEvent">
<Space direction="vertical" size="middle">
<Alert type="info" message="Resize the browser window to update the state" showIcon />
<Typography.Paragraph>
window width: <Tag color="green">{windowWidth}</Tag><br />
</Typography.Paragraph>
</Space>
</DisplayDemo>
);
};
<TestComponent />
```
### Mastering the hook
#### ✅ When to use
- To capture a specific event from the `window` global object.
#### 🛑 What not to do
- Avoid using the returned callback setter asynchronously, as it will only change the handler and may cause bugs in your code.
<!-- Types -->
### Types
```typescript static
import { type CallbackSetter } from './shared/types';
/**
* Accepts an event name then returns a callback setter for a function to be performed when the event triggers.
*/
declare const useGlobalEvent: <TEvent extends Event>(eventName: keyof WindowEventMap, opts?: AddEventListenerOptions) => CallbackSetter<TEvent>;
export default useGlobalEvent;
```
<!-- Types:end -->
================================================
FILE: docs/useHorizontalSwipe.md
================================================
# useHorizontalSwipe
Returns the state of the horizontal swipe gesture both on mobile or desktop.<br/>
It is intended as a shortcut to [useSwipe](./useSwipe.md).
================================================
FILE: docs/useInfiniteScroll.md
================================================
# useInfiniteScroll
A hook that accepts an HTML Element reference and returns a function that facilitates handling infinite scroll for that specific element.
### Why? 💡
- adds the required event listeners for infinite scrolling to the defined target
- takes care of cleaning up the event listener when the component is unmounted, reducing the risk of memory leaks in your application
- simplifies the implementation of infinite scroll business logic by providing an intuitive and easy-to-use interface
### Basic Usage:
Provide a DOM ref as first parameter to `useInfiniteScroll`
```jsx harmony
import { useState, useRef } from 'react';
import { Alert, List, Typography } from 'antd';
import useInfiniteScroll from 'beautiful-react-hooks/useInfiniteScroll';
const generateRandomNo = () => Math.floor(Math.random() * 11)
const initialData = Array.from({ length: 40 }).map(generateRandomNo)
/**
* Fake fetch, resolves an array of random numbers
* @param items
* @returns {Promise<unknown>}
*/
const fetchMock = (items = 10) => new Promise((resolve) => {
setTimeout(() => {
const data = Array.from({ length: items }).map(generateRandomNo)
resolve(data)
}, 1000)
})
/**
* Uses fetchMock to mimic an inifinite loading
* @returns {JSX.Element}
* @constructor
*/
const TestComponent = () => {
const targetElementRef = useRef();
const onInfiniteScroll = useInfiniteScroll(targetElementRef);
const [isFetching, setIsFetching] = useState(false)
const [data, setData] = useState(initialData)
onInfiniteScroll(() => {
if (!isFetching) {
setIsFetching(true)
fetchMock()
.then((next) => setData([...data, ...next]))
.finally(() => setIsFetching(false))
}
})
return (
<DisplayDemo title="useInfiniteScroll">
<div style={{ maxHeight: 250, overflow: 'scroll' }} ref={targetElementRef}>
<div style={{ height: 500, position: 'relative' }}>
<Alert type="info" message="Scroll to load more content" />
<List
bordered
dataSource={data}
renderItem={(_, item) => (
<List.Item>
<Typography.Text mark>mock item no: {item}</Typography.Text>
</List.Item>
)}
/>
{isFetching && (
<div style={{ opacity: 0.6, textAlign: 'center', marginBottom: 20 }}>
Loading next data...
</div>
)}
</div>
</div>
</DisplayDemo>
);
};
<TestComponent />
```
### Mastering the hook
#### ✅ When to use
- Use this hook to abstract your own infinite scroll business logic and streamline the implementation of this functionality in your
application
#### 🛑 What not to do
- Avoid using this hook to debounce or throttle your functions. If you're implementing a pagination-like infinite scroll, it's best to
handle this debounce/throttle functionality yourself, to ensure that your application behaves exactly as you intend.
<!-- Types -->
### Types
```typescript static
import { type RefObject } from 'react';
/**
* Accepts an HTML Element ref, then returns a function that allows you to handle the infinite
* scroll for that specific element.
*/
declare const useInfiniteScroll: <TElement extends HTMLElement>(ref: RefObject<TElement>, delay?: number) => import("./shared/types").CallbackSetter<unknown>;
export default useInfiniteScroll;
```
<!-- Types:end -->
================================================
FILE: docs/useInterval.md
================================================
# useInterval
A hook that facilitates the utilization of the `setInterval` function in React function components. This hook receives a callback function
and a delay duration as inputs, and subsequently, executes the given function at regular intervals with the specified delay time between
each invocation
### Why? 💡
- Ensures that the given callback is executed reliably, even when the component re-renders;
- Automatically cancels the interval when the component unmounts (although this behavior can be modified by adjusting the options);
- Provides information about the current state of the interval (whether it has been cleared or not);
- Offers a method to cancel the set interval, which can trigger a re-render of the component if desired.
### Basic Usage:
```jsx harmony
import { useState } from 'react';
import { Tag, Typography } from 'antd';
import useInterval from 'beautiful-react-hooks/useInterval';
const DelayedContentComponent = () => {
const [seconds, setSeconds] = useState(0);
// repeat the function each 1000ms
useInterval(() => {
setSeconds(1 + seconds);
}, 1000);
return (
<DisplayDemo title="useInterval">
<Typography.Text>Rendering since <Tag color="green">{seconds}</Tag>seconds</Typography.Text>
</DisplayDemo>
);
};
<DelayedContentComponent />
```
### State & clear method:
The hook returns information about the timeout's state (whether it has been cleared or not, represented by a boolean flag), and also offers
a method to potentially clear it.
**Note**: Invoking this method to programmatically clear the timeout may trigger the component re-rendering.
```jsx harmony
import { useState } from 'react';
import { Tag, Typography, Button } from 'antd';
import useInterval from 'beautiful-react-hooks/useInterval';
const DelayedContentComponent = () => {
const [seconds, setSeconds] = useState(0);
const [isCleared, clearInterval] = useInterval(() => {
setSeconds(1 + seconds);
}, 1000);
return (
<DisplayDemo>
<Typography.Paragraph>Rendering since <Tag color="green">{seconds}</Tag>seconds</Typography.Paragraph>
{!isCleared && <Button onClick={clearInterval} type="primary">Stop the counter</Button>}
{isCleared && <Typography.Paragraph mark>Interval cleared!</Typography.Paragraph>}
</DisplayDemo>
);
};
<DelayedContentComponent />
```
### Options:
It is possible to provide an options object as the last parameter of the hook.
#### cancelOnUnmount:
Defines whether the timeout should be cleared on unmount.
**default**: `true`
```jsx harmony
import { useState } from 'react';
import { Tag, Typography, Button } from 'antd';
import useInterval from 'beautiful-react-hooks/useInterval';
const DelayedContentComponent = () => {
const [seconds, setSeconds] = useState(0);
const options = { cancelOnUnmount: false };
useInterval(() => setSeconds(1 + seconds), 1000, options);
return (
<DisplayDemo>
<Typography.Paragraph>Rendering since <Tag color="green">{seconds}</Tag>seconds</Typography.Paragraph>
<Typography.Paragraph mark>It won't be cleared at unmount</Typography.Paragraph>
</DisplayDemo>
);
};
<DelayedContentComponent />
```
### Mastering the hook
#### ✅ When to use
- When you need to perform a function on a regular interval (e.g., every x number of milliseconds), regardless of whether the component
re-renders.
#### 🛑 When not to use
- When attempting to use it asynchronously, since doing so would violate the [rules of hooks](https://reactjs.org/docs/hooks-rules.html)
<!-- Types -->
### Types
```typescript static
import { type GenericFunction } from './shared/types';
export interface UseIntervalOptions {
cancelOnUnmount?: boolean;
}
/**
* An async-utility hook that accepts a callback function and a delay time (in milliseconds), then repeats the
* execution of the given function by the defined milliseconds.
*/
declare const useInterval: <TCallback extends GenericFunction>(fn: TCallback, milliseconds: number, options?: UseIntervalOptions) => [boolean, () => void];
export default useInterval;
```
<!-- Types:end -->
================================================
FILE: docs/useIsFirstRender.md
================================================
# useIsFirstRender
A hook that returns a boolean value indicating whether it's the first render or not.
This hook can be used to conditionally execute logic or render components based on whether it's the first time the component is being
rendered or if it's being re-rendered due to a state or prop change.
### 💡 Why?
- A useful tool for managing component rendering behavior and enables you to write more efficient and flexible code
### Basic Usage:
```jsx harmony
import { useState, useCallback } from 'react';
import { Button, Typography } from 'antd';
import useIsFirstRender from 'beautiful-react-hooks/useIsFirstRender';
const UseIsFirstRenderExample = () => {
const [data, setData] = useState(0)
const isFirstRender = useIsFirstRender();
const setNewDate = useCallback(() => setData(Date.now()), []);
return (
<DisplayDemo title="useIsFirstRender">
<Typography.Paragraph>Click on the button to update isFirstRender flag</Typography.Paragraph>
<Typography.Paragraph>isFirstRender: {isFirstRender ? 'yes' : 'no'}</Typography.Paragraph>
<Button type='primary' onClick={setNewDate}>
Update data
</Button>
</DisplayDemo>
);
};
<UseIsFirstRenderExample />
```
<!-- Types -->
### Types
```typescript static
declare const useIsFirstRender: () => boolean;
export default useIsFirstRender;
```
<!-- Types:end -->
================================================
FILE: docs/useLifecycle.md
================================================
# useLifecycle
A hook that facilitates performing specific functions during the lifecycle of a component.
It accepts two functions as arguments. The first function will be executed after the component has mounted, which means that the component
has been initialized and rendered on the screen. The second function will be executed right before the component unmounts, which happens
when the component is removed from the screen or destroyed.
Using this hook allows for greater control and customization of a component's behavior.
### Why? 💡
- Provides a wrapper for "lifecycle hooks" including `useDidMount` and `useWillUnmount`.
- Serves as a shorthand for `useEffect(onMount, [])` and `useEffect(() => () => willUnmount, [])`.
### Basic Usage:
```jsx harmony
import { useCallback } from 'react';
import { Alert } from 'antd';
import useLifecycle from 'beautiful-react-hooks/useLifecycle';
/**
* useDidMount example component
*/
const LifeCycleComponent = () => {
const onMount = useCallback(() => {
console.log('Component did mount');
}, []);
const onUnmount = useCallback(() => {
console.log('Component will unmount');
}, []);
useLifecycle(onMount, onUnmount);
return (
<DisplayDemo title="useLifecycle">
<Alert icon message="Please check the javascript console to read mount/unmount messages" />
</DisplayDemo>
);
};
<LifeCycleComponent />
```
### Callback setter syntax:
If you don't provide any parameters, you can use the returned callback setters to set the `useDidMount` and `useWillUnmount` handlers.
However, you must immediately invoke them to make it work.
**Note**: It's important to keep in mind that the callback setters are intended to modify the value of the callback reference only. They do
not cause the component to rerender, and you should not invoke them asynchronously. This ensures that the behavior of your code remains
predictable and that your project runs smoothly.
```jsx harmony
import { Alert } from 'antd';
import useLifecycle from 'beautiful-react-hooks/useLifecycle';
const ComponentDidMount = () => {
const { onDidMount, onWillUnmount } = useLifecycle();
onDidMount(() => {
console.log('Component did mount');
});
onWillUnmount(() => {
console.log('Component will unmount');
});
return (
<DisplayDemo title="useLifecycle">
<Alert icon message="Please check the javascript console to read mount/unmount messages" />
</DisplayDemo>
);
};
<ComponentDidMount />
```
#### ✅ Pro tip:
When using a React function component you should not really think of it in terms of "lifecycle".
To deep understanding `useEffect`, what it is and how it should be properly used, please read
"[A complete guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)"
by [Dan Abramov](https://twitter.com/dan_abramov)
### Mastering the hook
#### ✅ When to use
- When you need to execute a function after the component has mounted
- When you need to execute a function immediately before the component unmounts
- When you require a shortcut to the component lifecycle
#### 🛑 When not to use
- If you need to use it asynchronously, as this violates the [rules of hooks](https://reactjs.org/docs/hooks-rules.html)
- If you're using the callback setters, you must not use them asynchronously, but instead, immediately invoke them.
<!-- Types -->
### Types
```typescript static
import { type GenericFunction } from './shared/types';
/**
* Returns an object wrapping lifecycle hooks such as `useDidMount` or `useWillUnmount`.
* It is intended as a shortcut to those hooks.
*/
declare const useLifecycle: <TMount extends GenericFunction = GenericFunction, TUnmount extends GenericFunction = GenericFunction>(mount?: TMount | undefined, unmount?: TUnmount | undefined) => {
onDidMount: import("./shared/types").CallbackSetter<undefined>;
onWillUnmount: import("./shared/types").CallbackSetter<undefined>;
};
export default useLifecycle;
```
<!-- Types:end -->
================================================
FILE: docs/useLocalStorage.md
================================================
# useLocalStorage
A hook that enables effortless storage and retrieval of values in the
browser's [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
### 💡 Why?
- A fast and efficient method to implement the `localStorage` functionality in your React components
### Basic Usage:
```jsx harmony
import React, { useCallback } from 'react';
import { Button, Tag, Typography } from 'antd';
import useLocalStorage from 'beautiful-react-hooks/useLocalStorage';
const NotificationBadgeExample = ({ notifications }) => {
const [notificationCount, setNotificationCount] = useLocalStorage('demo-notification-count', notifications);
const clearNotifications = useCallback(() => {
setNotificationCount(0);
}, [notificationCount]);
const Actions = [
<Button type="primary" onClick={clearNotifications}>
You've got {notificationCount} new messages
</Button>
]
return (
<DisplayDemo title="useLocalStorage" actions={Actions}>
<Typography.Paragraph>
Click on the following button to clear data from the <Tag>demo-notification-count</Tag> local storage key.
</Typography.Paragraph>
</DisplayDemo>
)
};
<NotificationBadgeExample notifications={100} />
```
### Interface
```typescript
type SetValue<TValue> = (value: TValue | ((previousValue: TValue) => TValue)) => void
declare const useLocalStorage: <TValue>(storageKey: string, defaultValue?: any) => [TValue, SetValue<TValue>]
```
### Mastering the hooks
#### ✅ When to use
- When you need to get/set values from and to the `localStorage`
#### 🛑 When not to use
- Do not use this hook as a state manager, the `localStorage` is meant to be used for small pieces of data
<!-- Types -->
### Types
```typescript static
/**
* Save a value on local storage
*/
declare const useLocalStorage: <TValue>(storageKey: string, defaultValue?: any) => [TValue | null, (value: TValue | ((previousValue: TValue) => TValue)) => void];
export default useLocalStorage;
```
<!-- Types:end -->
================================================
FILE: docs/useLongPress.md
================================================
# useLongPress
A hook that facilitates the implementation of a long press functionality on a given target, supporting both mouse and touch events.
### Why? 💡
- Provides an easy way to add long-press functionality to a specific target element
- Automatically adds mouse event listeners to the specified target element
- Automatically removes the listeners when the component unmounts
- Enables abstractions on mouse-related and touch-related events
### Basic Usage:
```jsx harmony
import { useRef, useState } from 'react';
import { Tag, Space, Typography, Alert } from 'antd';
import useLongPress from 'beautiful-react-hooks/useLongPress';
const MyComponent = () => {
const [coordinates, setCoordinates] = useState([0, 0]);
const ref = useRef();
const [longPressCount, setLongPressCount] = useState(0)
const { isLongPressing, onLongPressStart, onLongPressEnd } = useLongPress(ref);
onLongPressStart(() => {
setLongPressCount(() => {
return longPressCount + 1
});
});
onLongPressEnd(() => {
setLongPressCount(() => {
return longPressCount + 1
});
})
return (
<DisplayDemo title="useLongPress">
<div ref={ref}>
<Space direction="vertical">
<Alert message="Long press this box to get information on the long press event" type="info" showIcon />
<Tag color={isLongPressing ? 'green' : 'red'}>isLongPressing: {isLongPressing ? 'yes' : 'no'}</Tag>
{!!longPressCount && (
<Typography.Paragraph>
Long press events count:
<Tag color="green">{longPressCount}</Tag>
</Typography.Paragraph>
)}
</Space>
</div>
</DisplayDemo>
);
};
<MyComponent />
```
### Press duration:
You can specify the duration of the long press by passing a number as the second argument to the hook.
```jsx harmony
import { useRef, useState } from 'react';
import { Tag, Space, Typography, Alert } from 'antd';
import useLongPress from 'beautiful-react-hooks/useLongPress';
const MyComponent = () => {
const [coordinates, setCoordinates] = useState([0, 0]);
const ref = useRef();
const { isLongPressing } = useLongPress(ref, 1000);
return (
<DisplayDemo title="useLongPress">
<div ref={ref}>
<Space direction="vertical">
<Alert message="Long press this box to get information on the long press event" type="info" showIcon />
<Tag color={isLongPressing ? 'green' : 'red'}>isLongPressing: {isLongPressing ? 'yes' : 'no'}</Tag>
</Space>
</div>
</DisplayDemo>
);
};
<MyComponent />
```
<!-- Types -->
================================================
FILE: docs/useMediaQuery.md
================================================
# useMediaQuery
A hook that takes in a media query string and utilizes the [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
API to check whether it corresponds to the present document.
Additionally, it tracks changes in the document to detect when it no longer corresponds to the provided media query.
The hook returns the validity status of the media query provided.
```jsx harmony
import { Tag, Typography, Space, Alert } from 'antd';
import useMediaQuery from 'beautiful-react-hooks/useMediaQuery';
const MediaQueryReporter = () => {
const isSmall = useMediaQuery('(max-width: 48rem)');
const isLarge = useMediaQuery('(min-width: 48rem)');
return (
<DisplayDemo title="useMediaQuery">
<Space direction="vertical">
<Alert type="info" message="Resize the browser window to see the changes" showIcon />
<Typography.Paragraph>Small view? <Tag color={isSmall ? 'green' : 'red'}>{isSmall ? 'yes' : 'no'}</Tag></Typography.Paragraph>
<Typography.Paragraph>Large view? <Tag color={isLarge ? 'green' : 'red'}>{isLarge ? 'yes' : 'no'}</Tag></Typography.Paragraph>
</Space>
</DisplayDemo>
);
};
<MediaQueryReporter />
```
### Mastering the hook
#### ✅ When to use
- If a component needs to display a different layout or behavior on various media types
- Conditionally render sub-components based on a specified media query
#### 🛑 When not to use
- Avoid using this hook to identify the user's device, use agent detection instead
<!-- Types -->
### Types
```typescript static
/**
* Accepts a media query string then uses the
* [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API to determine if it
* matches with the current document.<br />
* It also monitor the document changes to detect when it matches or stops matching the media query.<br />
* Returns the validity state of the given media query.
*
*/
declare const useMediaQuery: (mediaQuery: string) => boolean;
export default useMediaQuery;
```
<!-- Types:end -->
================================================
FILE: docs/useMouse.md
================================================
# `useMouse`
A hook that combines the functionalities of [useMouseState](./useMouseState.md) and [useMouseEvents](./useMouseEvents.md), returning an
array where the first item is the mouse state and the second item is a wrapper of all the handler-setters.
`useMouse` is intended as a shortcut to avoid the need for using both `useMouse`State and `useMouse`Events separately.
### Why? 💡
- Provides an easy way to obtain the mouse position
- Automatically adds mouse event listeners either globally or to the specified target element
- Automatically removes the listeners when the component unmounts
- Enables abstractions on mouse-related events
### Basic Usage:
Provide a DOM ref as first parameter to ``useMouse``
```jsx harmony
import { useRef, useState } from 'react';
import { Tag, Space, Alert } from 'antd';
import useMouse from 'beautiful-react-hooks/useMouse';
const MouseReporter = () => {
const ref = useRef();
const [showCoords, setShowCoords] = useState(false);
const [position, { onMouseEnter, onMouseLeave }] = useMouse(ref);
onMouseEnter(() => setShowCoords(true));
onMouseLeave(() => setShowCoords(false));
return (
<DisplayDemo title="useMediaQuery">
<div ref={ref}>
<Space direction="vertical">
<Alert message="Move mouse over this box to get its current coordinates" type="info" showIcon />
<Tag color="green">ClientX: {position.clientX}</Tag>
<Tag color="green">ClientY: {position.clientY}</Tag>
</Space>
</div>
</DisplayDemo>
);
};
<MouseReporter />
```
### Global events
If no ref is provided to `useMouse` it will use the window global object assign the events to
```jsx harmony
import { useState } from 'react';
import { Tag, Space, Alert } from 'antd';
import useMouse from 'beautiful-react-hooks/useMouse';
const MouseReporter = () => {
const [mouseDown, setMouseDown] = useState(false);
const [position, { onMouseDown, onMouseUp }] = useMouse();
onMouseDown(() => setMouseDown(true));
onMouseUp(() => setMouseDown(false));
return (
<DisplayDemo title="useMouse">
<Space direction="vertical">
<Alert message="Move mouse around to get its current global coordinates" type="info" showIcon />
<Tag color="green">ClientX: {position.clientX}</Tag>
<Tag color="green">ClientY: {position.clientY}</Tag>
</Space>
</DisplayDemo>
);
};
<MouseReporter />
```
### Mastering the hook
#### ✅ When to use
- use `useMouse` to obtain the current mouse position.
- use `useMouse` to abstract custom mouse-related logic into a hook.
#### 🛑 What not to do
- Do not use the returned callback setters asynchronously, as doing so will have no effect and may result in bugs in your code.
- Avoid using `useMouse` callback setters to replace standard mouse handler props.
- `useMouse` is designed to be used for abstracting more complex hooks that need to control the mouse, such as a drag-and-drop hook.
- Using `useMouse` handlers instead of the classic props approach will result in decreased performance due to the loss of the React
SyntheticEvent performance boost. If you were using a classic props approach before, continue to do so.
```jsx harmony static noedit
const MyComponent = (props) => {
const { mouseDownHandler } = props;
return (
<div onMouseDown={mouseDownHandler} />
);
};
```
<!-- Types -->
### Types
```typescript static
import { type RefObject } from 'react';
/**
* Returns an array where the first item is the mouse state from the `useMouseState` hook and the second item
* is the object of callback setters from the `useMouseEvents` hook.
* It is intended as a shortcut to those hooks.
*/
declare const useMouse: <TElement extends HTMLElement>(targetRef?: RefObject<TElement> | undefined) => ({
clientX: number;
clientY: number;
screenX: number;
screenY: number;
} | Readonly<{
onMouseDown: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseEnter: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseLeave: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseMove: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseOut: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseOver: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseUp: import("./shared/types").CallbackSetter<MouseEvent>;
}>)[];
export default useMouse;
```
<!-- Types:end -->
================================================
FILE: docs/useMouseEvents.md
================================================
# useMouseEvents
A hook that provides an easy way to manage mouse events by returning a set of callback setters. The returned setters allow control over
various mouse events including `onMouseDown`, `onMouseEnter`, `onMouseLeave`, `onMouseMove`, `onMouseOut`, `onMouseOver`, and `onMouseUp`.
The hook optionally accepts a reference to a DOM element to target the desired event(s) to. If no target is provided, the events will be
attached globally to the document object.
It is important to note that the returned callback setters should be immediately invoked within the component's body, and should not be
called asynchronously.
### Why? 💡
- handles the addition of mouse event listeners either globally or to a specified target.
- takes care of cleaning up the listeners when the component is unmounted.
- enables the implementation of abstractions on mouse-related events.
### Basic Usage:
Provide a DOM ref as first parameter to `useMouseEvents`
```jsx harmony
import { useRef, useState } from 'react';
import { Tag, Space, Alert } from 'antd';
import useMouseEvents from 'beautiful-react-hooks/useMouseEvents';
const MyComponent = () => {
const [coordinates, setCoordinates] = useState([0, 0]);
const ref = useRef();
const { onMouseMove, onMouseLeave } = useMouseEvents(ref);
onMouseMove((event) => {
const nextCoords = [event.clientX, event.clientY];
setCoordinates(nextCoords);
});
onMouseLeave(() => {
setCoordinates([0, 0]);
});
return (
<DisplayDemo title="useMouseEvent">
<div ref={ref}>
<Space direction="vertical">
<Alert message="Move mouse over this box to get its current coordinates" type="info" showIcon />
<Tag color="green">ClientX: {coordinates[0]}</Tag>
<Tag color="green">ClientY: {coordinates[1]}</Tag>
</Space>
</div>
</DisplayDemo>
);
};
<MyComponent />
```
### Global events
If no ref is provided to `useMouseEvents` it will use the window global object assign the events to
```jsx harmony
import { useState } from 'react';
import { Tag, Space, Alert } from 'antd';
import useMouseEvents from 'beautiful-react-hooks/useMouseEvents';
const MyComponent = () => {
const [coordinates, setCoordinates] = useState([0, 0]);
const { onMouseMove } = useMouseEvents();
onMouseMove((event) => {
const nextCoords = [event.clientX, event.clientY];
setCoordinates(nextCoords);
});
return (
<DisplayDemo title="useMouseEvent">
<Space direction="vertical">
<Alert message="Move mouse around to get its current global coordinates" type="info" showIcon />
<Tag color="green">ClientX: {coordinates[0]}</Tag>
<Tag color="green">ClientY: {coordinates[1]}</Tag>
</Space>
</DisplayDemo>
);
};
<MyComponent />
```
### Mastering the hook
#### ✅ When to use
- When you need to abstract mouse-related logics into custom hooks(s)
#### 🛑 What not to do
- Do not use the returned callback setters asynchronously, as doing so will have no effect and may result in bugs in your code.
- Avoid using `useMouseEvents` callback setters to replace standard mouse handler props.
- `useMouseEvents` is designed to be used for abstracting more complex hooks that need to control the mouse, such as a drag-and-drop hook.
- Using `useMouseEvents` handlers instead of the classic props approach will result in decreased performance due to the loss of the React
SyntheticEvent performance boost. If you were using a classic props approach before, continue to do so.
```jsx harmony static noedit
const MyComponent = (props) => {
const { mouseDownHandler } = props;
return (
<div onMouseDown={mouseDownHandler} />
);
};
```
<!-- Types -->
### Types
```typescript static
import { type RefObject } from 'react';
/**
* Returns a frozen object of callback setters to handle the mouse events.<br/>
* It accepts a DOM ref representing the events target. <br/>
* If a target is not provided the events will be globally attached to the document object.
* <br/>
* ### Shall the `useMouseEvents` callbacks replace the standard mouse handler props?
*
* **They shall not!**<br />
* **useMouseEvents is meant to be used to abstract more complex hooks that need to control mouse**, for instance:
* a drag n drop hook.<br />
* Using useMouseEvents handlers instead of the classic props approach it's just as bad as it sounds since you'll
* lose the React SyntheticEvent performance boost.<br />
* If you were doing something like the following:
*/
declare const useMouseEvents: <TElement extends HTMLElement>(targetRef?: RefObject<TElement> | undefined, passive?: boolean) => Readonly<{
onMouseDown: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseEnter: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseLeave: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseMove: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseOut: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseOver: import("./shared/types").CallbackSetter<MouseEvent>;
onMouseUp: import("./shared/types").CallbackSetter<MouseEvent>;
}>;
export default useMouseEvents;
```
<!-- Types:end -->
================================================
FILE: docs/useMouseState.md
================================================
# useMouseState
A hook that returns relevant properties from the current mouse position, such as clientX and clientY. To ensure that events are attached to
the intended target, please provide a DOM reference to the hook. If no target is specified, the events will be attached to the
the `document` object globally.
### Why? 💡
- Allows to quickly get the mouse position
- Manages the addition of mouse event listeners either globally or to a defined target
- Ensures the listener is cleaned up when the component unmounts
### Basic Usage:
Provide a DOM ref as first parameter to `useMouseState`
```jsx harmony
import { useRef } from 'react';
import { Tag, Space, Alert } from 'antd';
import useMouseState from 'beautiful-react-hooks/useMouseState';
const MouseReporter = () => {
const ref = useRef();
const { clientX, clientY } = useMouseState(ref);
return (
<DisplayDemo title="useMediaQuery">
<div ref={ref}>
<Space direction="vertical">
<Alert message="Move mouse over this box to get its current coordinates" type="info" showIcon />
<Tag color="green">ClientX: {clientX}</Tag>
<Tag color="green">ClientY: {clientY}</Tag>
</Space>
</div>
</DisplayDemo>
);
};
<MouseReporter />
```
### Global events
Attach the mouse events globally by simply not providing any dom reference to the `useMouseState` hook
```jsx harmony
import { Tag, Space, Alert } from 'antd';
import useMouseState from 'beautiful-react-hooks/useMouseState';
const MouseReporter = () => {
const { clientX, clientY } = useMouseState();
return (
<DisplayDemo title="useMouseState">
<Space direction="vertical">
<Alert message="Move mouse around to get its current global coordinates" type="info" showIcon />
<Tag color="green">ClientX: {clientX}</Tag>
<Tag color="green">ClientY: {clientY}</Tag>
</Space>
</DisplayDemo>
);
};
<MouseReporter />
```
### Mastering the hook
#### ✅ When to use
- When you need to abstract mouse-related logics into custom hooks(s)
- When you need to quickly get the current mouse position
<!-- Types -->
### Types
```typescript static
import { type RefObject } from 'react';
/**
* Returns the current state (position) of the mouse pointer.
* It possibly accepts a DOM ref representing the mouse target.
* If a target is not provided the state will be caught globally.
*/
declare const useMouseState: <TElement extends HTMLElement>(targetRef?: RefObject<TElement> | undefined) => {
clientX: number;
clientY: number;
screenX: number;
screenY: number;
};
export default useMouseState;
```
<!-- Types:end -->
================================================
FILE: docs/useMutableState.md
================================================
# useMutableState
This hook provides mutable states that trigger the component to re-render. It offers similar functionality to Svelte's reactivity, enabling
developers to write more efficient and concise code.
### Why? 💡
- Improves code streamlining by providing a reactive state that can be used to trigger a rerender
### Basic Usage:
```jsx harmony
import { Typography, Space, Button, Tag } from 'antd';
import useMutableState from 'beautiful-react-hooks/useMutableState';
const TestComponent = () => {
co
gitextract_vvbbjhwk/ ├── .eslintignore ├── .eslintrc.js ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── tests_checker.yml │ └── workflows/ │ ├── branch-tests.yml │ └── ci.yml ├── .gitignore ├── .huskyrc ├── .mocharc.json ├── .npmrc ├── .nycrc ├── .releaserc.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── HOOK_DOCUMENTATION_TEMPLATE.md ├── LICENSE.txt ├── README.md ├── babel.config.js ├── docs/ │ ├── Installation.md │ ├── Introduction.md │ ├── README.es-ES.md │ ├── README.it-IT.md │ ├── README.jp-JP.md │ ├── README.pl-PL.md │ ├── README.pt-BR.md │ ├── README.tr-TR.md │ ├── README.uk-UA.md │ ├── README.zh-CN.md │ ├── useAudio.md │ ├── useConditionalTimeout.md │ ├── useCookie.md │ ├── useDarkMode.md │ ├── useDebouncedCallback.md │ ├── useDefaultedState.md │ ├── useDidMount.md │ ├── useDrag.md │ ├── useDragEvents.md │ ├── useDropZone.md │ ├── useEvent.md │ ├── useGeolocation.md │ ├── useGeolocationEvents.md │ ├── useGeolocationState.md │ ├── useGlobalEvent.md │ ├── useHorizontalSwipe.md │ ├── useInfiniteScroll.md │ ├── useInterval.md │ ├── useIsFirstRender.md │ ├── useLifecycle.md │ ├── useLocalStorage.md │ ├── useLongPress.md │ ├── useMediaQuery.md │ ├── useMouse.md │ ├── useMouseEvents.md │ ├── useMouseState.md │ ├── useMutableState.md │ ├── useMutationObserver.md │ ├── useObjectState.md │ ├── useObservable.md │ ├── useOnlineState.md │ ├── usePreviousValue.md │ ├── useQueryParam.md │ ├── useQueryParams.md │ ├── useRenderInfo.md │ ├── useRequestAnimationFrame.md │ ├── useResizeObserver.md │ ├── useSearchQuery.md │ ├── useSessionStorage.md │ ├── useSpeechRecognition.md │ ├── useSpeechSynthesis.md │ ├── useSwipe.md │ ├── useSwipeEvents.md │ ├── useSystemVoices.md │ ├── useThrottledCallback.md │ ├── useTimeout.md │ ├── useToggle.md │ ├── useTouch.md │ ├── useTouchEvents.md │ ├── useTouchState.md │ ├── useURLSearchParams.md │ ├── useUnmount.md │ ├── useUpdateEffect.md │ ├── useValidatedState.md │ ├── useValueHistory.md │ ├── useVerticalSwipe.md │ ├── useViewportSpy.md │ ├── useViewportState.md │ ├── useWillUnmount.md │ ├── useWindowResize.md │ ├── useWindowScroll.md │ └── utils/ │ ├── _CustomLogo.js │ ├── _EmptyComponent.js │ ├── _custom.css │ ├── _setup.js │ └── _styleguidist.theme.js ├── package.json ├── scripts/ │ ├── commit-version.sh │ ├── generate-doc-append-types.js │ ├── generate-exports.js │ └── update-version.js ├── src/ │ ├── factory/ │ │ ├── createHandlerSetter.ts │ │ └── createStorageHook.ts │ ├── shared/ │ │ ├── geolocationUtils.ts │ │ ├── isAPISupported.ts │ │ ├── isClient.ts │ │ ├── isDevelopment.ts │ │ ├── isFunction.ts │ │ ├── noop.ts │ │ ├── safeHasOwnProperty.ts │ │ ├── safelyParseJson.ts │ │ ├── swipeUtils.ts │ │ ├── types.ts │ │ └── warnOnce.ts │ ├── useAudio.ts │ ├── useConditionalTimeout.ts │ ├── useCookie.ts │ ├── useDarkMode.ts │ ├── useDebouncedCallback.ts │ ├── useDefaultedState.ts │ ├── useDidMount.ts │ ├── useDrag.ts │ ├── useDragEvents.ts │ ├── useDropZone.ts │ ├── useEvent.ts │ ├── useGeolocation.ts │ ├── useGeolocationEvents.ts │ ├── useGeolocationState.ts │ ├── useGlobalEvent.ts │ ├── useHorizontalSwipe.ts │ ├── useInfiniteScroll.ts │ ├── useInterval.ts │ ├── useIsFirstRender.ts │ ├── useLifecycle.ts │ ├── useLocalStorage.ts │ ├── useLongPress.ts │ ├── useMediaQuery.ts │ ├── useMouse.ts │ ├── useMouseEvents.ts │ ├── useMouseState.ts │ ├── useMutableState.ts │ ├── useMutationObserver.ts │ ├── useObjectState.ts │ ├── useObservable.ts │ ├── useOnlineState.ts │ ├── usePreviousValue.ts │ ├── useQueryParam.ts │ ├── useQueryParams.ts │ ├── useRenderInfo.ts │ ├── useRequestAnimationFrame.ts │ ├── useResizeObserver.ts │ ├── useSearchQuery.ts │ ├── useSessionStorage.ts │ ├── useSpeechRecognition.ts │ ├── useSpeechSynthesis.ts │ ├── useSwipe.ts │ ├── useSwipeEvents.ts │ ├── useSystemVoices.ts │ ├── useThrottledCallback.ts │ ├── useTimeout.ts │ ├── useToggle.ts │ ├── useTouch.ts │ ├── useTouchEvents.ts │ ├── useTouchState.ts │ ├── useURLSearchParams.ts │ ├── useUnmount.ts │ ├── useUpdateEffect.ts │ ├── useValidatedState.ts │ ├── useValueHistory.ts │ ├── useVerticalSwipe.ts │ ├── useViewportSpy.ts │ ├── useViewportState.ts │ ├── useWillUnmount.ts │ ├── useWindowResize.ts │ └── useWindowScroll.ts ├── styleguide.config.js ├── test/ │ ├── _setup.js │ ├── geolocationUtils.spec.js │ ├── isAPISupported.spec.js │ ├── isClient.spec.js │ ├── mocks/ │ │ ├── AudioApi.mock.js │ │ ├── CookieStoreApi.mock.js │ │ ├── GeoLocationApi.mock.js │ │ ├── IntersectionObserver.mock.js │ │ ├── MatchMediaQueryList.mock.js │ │ ├── ResizeObserver.mock.js │ │ ├── SpeechSynthesis.mock.js │ │ └── SpeechSynthesisUtterance.mock.js │ ├── safeHasOwnProperty.spec.js │ ├── useAudio.spec.js │ ├── useConditionalTimeout.spec.js │ ├── useCookie.spec.js │ ├── useDarkMode.spec.js │ ├── useDebouncedCallback.spec.js │ ├── useDefaultedState.spec.js │ ├── useDidMount.spec.js │ ├── useDrag.spec.js │ ├── useDragEvents.spec.js │ ├── useDropZone.spec.js │ ├── useEvent.spec.js │ ├── useGeolocation.spec.js │ ├── useGeolocationEvents.spec.js │ ├── useGeolocationState.spec.js │ ├── useGlobalEvent.spec.js │ ├── useHandlerSetter.spec.js │ ├── useInfiniteScroll.spec.js │ ├── useInterval.spec.js │ ├── useIsFirstRender.spec.js │ ├── useLifecycle.spec.js │ ├── useLocalStorage.spec.js │ ├── useLongPress.spec.js │ ├── useMediaQuery.spec.js │ ├── useMouse.spec.js │ ├── useMouseEvents.spec.js │ ├── useMouseState.spec.js │ ├── useMutableState.spec.js │ ├── useMutationObserver.spec.js │ ├── useObjectState.spec.js │ ├── useObservable.spec.js │ ├── useOnlineState.spec.js │ ├── usePreviousValue.spec.js │ ├── useQueryParam.spec.js │ ├── useQueryParams.spec.js │ ├── useRenderInfo.spec.js │ ├── useRequestAnimationFrame.spec.js │ ├── useResizeObserver.spec.js │ ├── useSearchQuery.spec.js │ ├── useSessionStorage.spec.js │ ├── useSpeechRecognition.spec.js │ ├── useSpeechSynthesis.spec.js │ ├── useStorage.spec.js │ ├── useSwipe.spec.js │ ├── useSwipeEvents.spec.js │ ├── useSystemVoices.spec.js │ ├── useThrottledCallback.spec.js │ ├── useTimeout.spec.js │ ├── useToggle.spec.js │ ├── useTouchEvents.spec.js │ ├── useTouchState.spec.js │ ├── useURLSearchParams.spec.js │ ├── useUnmount.spec.js │ ├── useUpdateEffect.spec.js │ ├── useValidatedState.spec.js │ ├── useValueHistory.spec.js │ ├── useViewportSpy.spec.js │ ├── useViewportState.spec.js │ ├── useWillUnmount.spec.js │ ├── useWindowResize.spec.js │ ├── useWindowScroll.spec.js │ ├── utils/ │ │ ├── ReactRouterWrapper.js │ │ ├── assertFunction.js │ │ ├── assertHook.js │ │ └── promiseDelay.js │ └── warnOnce.spec.js ├── tsconfig.cjs.json ├── tsconfig.esm.json ├── tsconfig.json └── tsconfig.types.json
SYMBOL INDEX (75 symbols across 38 files)
FILE: src/factory/createStorageHook.ts
type SetValue (line 13) | type SetValue<TValue> = (value: TValue | ((previousValue: TValue) => TVa...
FILE: src/shared/isFunction.ts
type SomeFunction (line 1) | type SomeFunction = (...args: any[]) => any
FILE: src/shared/swipeUtils.ts
type Direction (line 21) | type Direction = 'right' | 'left' | 'down' | 'up'
FILE: src/shared/types.ts
type Noop (line 1) | interface Noop {
type GenericFunction (line 11) | type GenericFunction = (...args: any[]) => any
type SomeCallback (line 17) | type SomeCallback<TArgs, TResult = void> = (...args: TArgs[]) => TResult
type CallbackSetter (line 23) | type CallbackSetter<TArgs> = (nextCallback: SomeCallback<TArgs>) => void
type BRHGeolocationPosition (line 29) | interface BRHGeolocationPosition {
type BRHGeolocationPositionError (line 46) | interface BRHGeolocationPositionError {
FILE: src/useAudio.ts
type UseAudioPreloadType (line 258) | type UseAudioPreloadType = 'auto' | 'metadata' | 'none';
type AudioState (line 263) | interface AudioState {
type UseAudioOptions (line 279) | interface UseAudioOptions {
type AudioControls (line 291) | interface AudioControls {
FILE: src/useConditionalTimeout.ts
type UseConditionalTimeoutOptios (line 59) | interface UseConditionalTimeoutOptios {
type UseConditionalTimeoutReturn (line 69) | type UseConditionalTimeoutReturn = [boolean, () => void]
FILE: src/useCookie.ts
type CookieSameSite (line 100) | enum CookieSameSite {
type CookieStoreDeleteOptions (line 106) | interface CookieStoreDeleteOptions {
type CookieBase (line 112) | interface CookieBase extends CookieStoreDeleteOptions {
type CookieBaseWithNameAndValue (line 116) | interface CookieBaseWithNameAndValue extends CookieBase {
type UseCookieOptions (line 121) | interface UseCookieOptions extends CookieBase {
type CookieStore (line 125) | interface CookieStore {
type UseCookieReturn (line 131) | interface UseCookieReturn {
FILE: src/useDarkMode.ts
constant COLOR_SCHEME_QUERY (line 10) | const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)'
constant LOCAL_STORAGE_KEY (line 11) | const LOCAL_STORAGE_KEY = 'beautiful-react-hooks-is-dark-mode'
type UseDarkModeReturn (line 57) | interface UseDarkModeReturn {
FILE: src/useDebouncedCallback.ts
type DebounceOptions (line 6) | interface DebounceOptions {
FILE: src/useDrag.ts
type UseDragOptions (line 4) | interface UseDragOptions {
FILE: src/useDragEvents.ts
type UseDragEventsResult (line 6) | interface UseDragEventsResult {
FILE: src/useDropZone.ts
type UseDropZoneResult (line 5) | interface UseDropZoneResult {
FILE: src/useGeolocationEvents.ts
type UseGeolocationEventsResult (line 6) | interface UseGeolocationEventsResult {
FILE: src/useGeolocationState.ts
type GeolocationState (line 7) | interface GeolocationState {
type UseGeolocationStateResult (line 13) | interface UseGeolocationStateResult extends GeolocationState {
FILE: src/useInterval.ts
type UseIntervalOptions (line 6) | interface UseIntervalOptions {
FILE: src/useLongPress.ts
type UseLongPressResult (line 58) | interface UseLongPressResult {
FILE: src/useQueryParam.ts
type UseQueryParamOptions (line 6) | interface UseQueryParamOptions<TValue extends string> {
FILE: src/useQueryParams.ts
type UseQueryParamsOptions (line 6) | interface UseQueryParamsOptions<TValue extends string[]> {
FILE: src/useRenderInfo.ts
type RenderInfo (line 3) | interface RenderInfo {
FILE: src/useRequestAnimationFrame.ts
type UseRequestAnimationFrameOpts (line 9) | interface UseRequestAnimationFrameOpts {
FILE: src/useResizeObserver.ts
type DOMRectValues (line 12) | type DOMRectValues = Pick<DOMRectReadOnly, 'bottom' | 'height' | 'left' ...
FILE: src/useSpeechRecognition.ts
type SpeechRecognitionEvent (line 4) | interface SpeechRecognitionEvent extends Event {
type SpeechRecognitionPolyfill (line 8) | interface SpeechRecognitionPolyfill {
type Window (line 19) | interface Window {
type UseSpeechRecognitionResult (line 77) | interface UseSpeechRecognitionResult {
FILE: src/useSpeechSynthesis.ts
type UseSpeechSynthesisOptions (line 7) | interface UseSpeechSynthesisOptions {
type SpeechSynthesisResult (line 17) | interface SpeechSynthesisResult {
FILE: src/useSwipe.ts
type UseSwipeOptions (line 9) | interface UseSwipeOptions {
type SwipeState (line 19) | interface SwipeState {
FILE: src/useSwipeEvents.ts
type SwipeEventState (line 12) | interface SwipeEventState {
type UseSwipeEventsReturn (line 23) | interface UseSwipeEventsReturn {
type UseSwipeEventsOpts (line 33) | interface UseSwipeEventsOpts {
FILE: src/useThrottledCallback.ts
type ThrottleSettings (line 6) | interface ThrottleSettings {
FILE: src/useTimeout.ts
type UseTimeoutOptions (line 6) | interface UseTimeoutOptions {
FILE: src/useTouchEvents.ts
type UseTouchEventsReturn (line 38) | interface UseTouchEventsReturn {
FILE: src/useValidatedState.ts
type Validator (line 18) | type Validator<TValue> = (value: TValue) => boolean
type ValidationResult (line 20) | interface ValidationResult {
FILE: src/useViewportState.ts
type ViewportState (line 7) | interface ViewportState {
FILE: styleguide.config.js
method webpackConfig (line 31) | webpackConfig () {
FILE: test/mocks/AudioApi.mock.js
class AudioApiMock (line 1) | class AudioApiMock extends window.Audio {
method constructor (line 6) | constructor() {
FILE: test/mocks/GeoLocationApi.mock.js
method getCurrentPosition (line 19) | getCurrentPosition(fn) {
method watchPosition (line 24) | watchPosition(success, error, options) {
method clearWatch (line 30) | clearWatch() {
FILE: test/mocks/IntersectionObserver.mock.js
class IntersectionObserverMock (line 1) | class IntersectionObserverMock {
method constructor (line 2) | constructor(fn) {
method observe (line 9) | observe() {
method disconnect (line 15) | disconnect() {
FILE: test/mocks/MatchMediaQueryList.mock.js
method addEventListener (line 4) | addEventListener(cb) {
method removeListener (line 7) | removeListener() {
FILE: test/mocks/ResizeObserver.mock.js
class ResizeObserverMock (line 1) | class ResizeObserverMock {
method constructor (line 2) | constructor(fn) {
method observe (line 7) | observe() {
method unobserve (line 13) | unobserve() {
FILE: test/mocks/SpeechSynthesis.mock.js
method getVoices (line 2) | getVoices() {
FILE: test/mocks/SpeechSynthesisUtterance.mock.js
class SpeechSynthesisUtteranceMock (line 1) | class SpeechSynthesisUtteranceMock {
method constructor (line 2) | constructor(text) {
Condensed preview — 259 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (524K chars).
[
{
"path": ".eslintignore",
"chars": 24,
"preview": "/dist\n/docs\n/test\n/docs\n"
},
{
"path": ".eslintrc.js",
"chars": 1197,
"preview": "module.exports = {\n env: {\n browser: true,\n es2021: true\n },\n extends: [\n 'plugin:react/recommended',\n 's"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 834,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the b"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 595,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your fea"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 875,
"preview": "<!--- Provide a general summary of your changes in the Title above -->\n\n## Description\n<!--- Describe your changes in de"
},
{
"path": ".github/tests_checker.yml",
"chars": 212,
"preview": "comment: 'Hello, thank you for contributing! It looks like your PR introduces new code that has not been tested, please "
},
{
"path": ".github/workflows/branch-tests.yml",
"chars": 447,
"preview": "name: Tests\n\non:\n push:\n branches-ignore:\n - master\n pull_request:\n branches-ignore:\n - master\n\njobs:\n"
},
{
"path": ".github/workflows/ci.yml",
"chars": 1457,
"preview": "name: CI/CD\n\nenv:\n CI: true\n\non:\n push:\n branches: [ master ]\n paths-ignore:\n - 'docs/**'\n - '*.md'\njo"
},
{
"path": ".gitignore",
"chars": 4209,
"preview": "################ NODE.JS\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*."
},
{
"path": ".huskyrc",
"chars": 51,
"preview": "{\n \"hooks\": {\n \"pre-commit\": \"npm run lint\"\n }\n}\n"
},
{
"path": ".mocharc.json",
"chars": 159,
"preview": "{\n \"require\": [\n \"jsdom-global/register\",\n \"@babel/register\",\n \"regenerator-runtime/runtime\",\n \"mock-local-"
},
{
"path": ".npmrc",
"chars": 15,
"preview": "save-exact=true"
},
{
"path": ".nycrc",
"chars": 255,
"preview": "{\n \"all\": true,\n \"reporter\": [\"lcov\"],\n \"check-coverage\": true,\n \"extension\": [ \".js\" ],\n \"include\": [ \"dist/*.js\" "
},
{
"path": ".releaserc.json",
"chars": 675,
"preview": "{\n \"branches\": [\n \"master\"\n ],\n \"tagFormat\": \"v${version}\",\n \"plugins\": [\n \"@semantic-release/commit-analyzer\""
},
{
"path": "CHANGELOG.md",
"chars": 15541,
"preview": "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Change"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3407,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participa"
},
{
"path": "CONTRIBUTING.md",
"chars": 10599,
"preview": "# Contributing to this library\n\nFirst of all, thanks for taking the time to contribute! 😬\n\nThe following is a set of gui"
},
{
"path": "HOOK_DOCUMENTATION_TEMPLATE.md",
"chars": 623,
"preview": "# useYourHookName\n\nA hook that [...]\n\n### 💡 Why?\n\n- why this hook is necessary and what it does\n\n### Basic Usage:\n\n```js"
},
{
"path": "LICENSE.txt",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2019 Antonio Russo\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 7110,
"preview": "\n[![Coverage Status](h"
},
{
"path": "babel.config.js",
"chars": 63,
"preview": "module.exports = {\n presets: ['@babel/react', '@babel/env']\n}\n"
},
{
"path": "docs/Installation.md",
"chars": 1461,
"preview": "# Getting started\n\nUsing `npm`:\n\n```bash\n$ npm i --save beautiful-react-hooks\n```\n\nUsing `yarn`:\n\n```bash \n$ yarn add be"
},
{
"path": "docs/Introduction.md",
"chars": 1839,
"preview": "# Introduction\n\n[](h"
},
{
"path": "docs/README.es-ES.md",
"chars": 6812,
"preview": "\n[![Coverage Status](h"
},
{
"path": "docs/README.it-IT.md",
"chars": 6871,
"preview": "\n[![Coverage Status](h"
},
{
"path": "docs/README.jp-JP.md",
"chars": 6052,
"preview": "\n[![Coverage Status](h"
},
{
"path": "docs/README.pl-PL.md",
"chars": 6686,
"preview": "\n[![Coverage Status](h"
},
{
"path": "docs/README.pt-BR.md",
"chars": 6794,
"preview": "\n[![Coverage Status](h"
},
{
"path": "docs/README.tr-TR.md",
"chars": 7289,
"preview": "\n[![Coverage Status](h"
},
{
"path": "docs/README.uk-UA.md",
"chars": 7066,
"preview": "\n[![Coverage Status](h"
},
{
"path": "docs/README.zh-CN.md",
"chars": 5710,
"preview": "\n[![Coverage Status](h"
},
{
"path": "docs/useAudio.md",
"chars": 2908,
"preview": "# useAudio\n\nCreates an `<audio>` element, monitors its state and provides access to playback controls.\n\n### Why? 💡\n\n- A "
},
{
"path": "docs/useConditionalTimeout.md",
"chars": 6022,
"preview": "# useConditionalTimeout\n\nAn asynchronous hook which takes in three parameters: a \"callback\", a \"delay time\" (in millisec"
},
{
"path": "docs/useCookie.md",
"chars": 2457,
"preview": "# useCookie\n\nA hook that facilitates the storage, updating, and deletion of values within\nthe [CookieStore](https://deve"
},
{
"path": "docs/useDarkMode.md",
"chars": 1763,
"preview": "# useDarkMode\n\nA hook that manages all the necessary operations to incorporate a toggle switch for dark and light modes "
},
{
"path": "docs/useDebouncedCallback.md",
"chars": 7421,
"preview": "# useDebouncedCallback\n\nA hook that accepts a `function` parameter and produces a new memoized variant of that function "
},
{
"path": "docs/useDefaultedState.md",
"chars": 1498,
"preview": "# useDefaultedState\n\nA hook that functions similar to `useState`, with the added capability to receive a defaultValue an"
},
{
"path": "docs/useDidMount.md",
"chars": 3001,
"preview": "# useDidMount\n\nA hook that takes in a function to execute when the component has finished mounting.\n\n### Why? 💡\n\n- takes"
},
{
"path": "docs/useDrag.md",
"chars": 2737,
"preview": "# useDrag\n\nA hook that receives a reference to an HTML Element (using React's useRef) and enables it to be dragged.\\\nThe"
},
{
"path": "docs/useDragEvents.md",
"chars": 4984,
"preview": "# useDragEvents\n\nA hook that provides a collection of functions designed to simplify the management of drag-related even"
},
{
"path": "docs/useDropZone.md",
"chars": 2875,
"preview": "# useDropZone\n\nA hook that receives an HTML Element ref and transforms it into a drop-zone capable of accepting data fro"
},
{
"path": "docs/useEvent.md",
"chars": 3241,
"preview": "# useEvent\n\nA hook that allows you to specify an HTML element and an event name. It sets up a listener so that when that"
},
{
"path": "docs/useGeolocation.md",
"chars": 3891,
"preview": "# useGeolocation\n\nA hook that does the job of two - now that's efficiency! This nifty little function returns an array w"
},
{
"path": "docs/useGeolocationEvents.md",
"chars": 3008,
"preview": "# useGeolocationEvents\n\nA hook that returns an object of callback setters (functions to set the callback that will be pe"
},
{
"path": "docs/useGeolocationState.md",
"chars": 4749,
"preview": "# useGeolocationState\n\nA hook that returns an object comprising information on the response from\nthe [Geolocation API](h"
},
{
"path": "docs/useGlobalEvent.md",
"chars": 3124,
"preview": "# useGlobalEvent\n\nA hook that streamlines event handling in your application, ensuring that event listeners are added an"
},
{
"path": "docs/useHorizontalSwipe.md",
"chars": 163,
"preview": "# useHorizontalSwipe\n\nReturns the state of the horizontal swipe gesture both on mobile or desktop.<br/>\nIt is intended a"
},
{
"path": "docs/useInfiniteScroll.md",
"chars": 3641,
"preview": "# useInfiniteScroll\n\nA hook that accepts an HTML Element reference and returns a function that facilitates handling infi"
},
{
"path": "docs/useInterval.md",
"chars": 4115,
"preview": "# useInterval\n\nA hook that facilitates the utilization of the `setInterval` function in React function components. This "
},
{
"path": "docs/useIsFirstRender.md",
"chars": 1376,
"preview": "# useIsFirstRender\n\nA hook that returns a boolean value indicating whether it's the first render or not.\n\nThis hook can "
},
{
"path": "docs/useLifecycle.md",
"chars": 3998,
"preview": "# useLifecycle\n\nA hook that facilitates performing specific functions during the lifecycle of a component.\n\nIt accepts t"
},
{
"path": "docs/useLocalStorage.md",
"chars": 2028,
"preview": "# useLocalStorage\n\nA hook that enables effortless storage and retrieval of values in the\nbrowser's [Local Storage](https"
},
{
"path": "docs/useLongPress.md",
"chars": 2617,
"preview": "# useLongPress\n\nA hook that facilitates the implementation of a long press functionality on a given target, supporting b"
},
{
"path": "docs/useMediaQuery.md",
"chars": 2062,
"preview": "# useMediaQuery\n\nA hook that takes in a media query string and utilizes the [matchMedia](https://developer.mozilla.org/e"
},
{
"path": "docs/useMouse.md",
"chars": 4550,
"preview": "# `useMouse`\n\nA hook that combines the functionalities of [useMouseState](./useMouseState.md) and [useMouseEvents](./use"
},
{
"path": "docs/useMouseEvents.md",
"chars": 5218,
"preview": "# useMouseEvents\n\nA hook that provides an easy way to manage mouse events by returning a set of callback setters. The re"
},
{
"path": "docs/useMouseState.md",
"chars": 2667,
"preview": "# useMouseState\n\nA hook that returns relevant properties from the current mouse position, such as clientX and clientY. T"
},
{
"path": "docs/useMutableState.md",
"chars": 995,
"preview": "# useMutableState\n\nThis hook provides mutable states that trigger the component to re-render. It offers similar function"
},
{
"path": "docs/useMutationObserver.md",
"chars": 2237,
"preview": "# useMutationObserver\n\nA hook that employs the [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/Mutat"
},
{
"path": "docs/useObjectState.md",
"chars": 1966,
"preview": "# useObjectState\n\nA hook has been developed to emulate the behavior of the now deprecated class Component.setState metho"
},
{
"path": "docs/useObservable.md",
"chars": 3677,
"preview": "# useObservable\n\nA hook that enables reactivity in your components through the utilization of `RxJs` library.\n\n### Why? "
},
{
"path": "docs/useOnlineState.md",
"chars": 1673,
"preview": "# useOnlineState\n\nA hook is available in this library that utilizes\nthe [Navigator online API](https://developer.mozilla"
},
{
"path": "docs/usePreviousValue.md",
"chars": 1329,
"preview": "# usePreviousValue\n\nA hook that receives a variable, which can be either a prop or a state, and outputs its previous val"
},
{
"path": "docs/useQueryParam.md",
"chars": 1601,
"preview": "# useQueryParam\n\nA hook built on top of React Router v5 that facilitate access and manipulation of query parameters.\n\n##"
},
{
"path": "docs/useQueryParams.md",
"chars": 1773,
"preview": "# useQueryParams\n\nVery similar to `useQueryParam` (mind the final 's'), it eases the process of manipulate a query strin"
},
{
"path": "docs/useRenderInfo.md",
"chars": 2041,
"preview": "# useRenderInfo\n\nA hook that prints the number of renders for a given component, along with a timestamp of the most rece"
},
{
"path": "docs/useRequestAnimationFrame.md",
"chars": 3814,
"preview": "# useRequestAnimationFrame\n\nA hook that facilitates the execution of javascript animations.\n\nUpon usage, this hook initi"
},
{
"path": "docs/useResizeObserver.md",
"chars": 2933,
"preview": "# useResizeObserver\n\nA hook that utilizes the [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeOb"
},
{
"path": "docs/useSearchQuery.md",
"chars": 1412,
"preview": "# useSearchQuery\n\nA hook built on top of React Router v5 that facilitate access and manipulation of the 'search' query p"
},
{
"path": "docs/useSessionStorage.md",
"chars": 2056,
"preview": "# useSessionStorage\n\nA hook that enables effortless storage and retrieval of values in the\nbrowser's [Session Storage](h"
},
{
"path": "docs/useSpeechRecognition.md",
"chars": 1272,
"preview": "# useSpeechSynthesis\n\nA hook that provides an interface for using the [Web_Speech_API](https://developer.mozilla.org/en-"
},
{
"path": "docs/useSpeechSynthesis.md",
"chars": 4269,
"preview": "# useSpeechSynthesis\n\nA hook that allows you to integrate text-to-speech functionality (with varying voices) within your"
},
{
"path": "docs/useSwipe.md",
"chars": 4209,
"preview": "# useSwipe\n\nA hook that provides access to the current state of swipe gestures, regardless of whether the user is on a m"
},
{
"path": "docs/useSwipeEvents.md",
"chars": 5012,
"preview": "# useSwipeEvents\n\nA hook that provides a set of callback setters to manage swipe events. It can optionally receive a DOM"
},
{
"path": "docs/useSystemVoices.md",
"chars": 1847,
"preview": "# useSystemVoices\n\nA hook that returns all the available voices on the system.\n\n**Note:** it's important to note that th"
},
{
"path": "docs/useThrottledCallback.md",
"chars": 6882,
"preview": "# useThrottledCallback\n\nA hook that takes in a function as an argument and returns a new memoized version of the functio"
},
{
"path": "docs/useTimeout.md",
"chars": 4048,
"preview": "# useTimeout\n\nA hook that facilitates the utilization of the `setTimeout` function in React function components. This ho"
},
{
"path": "docs/useToggle.md",
"chars": 1857,
"preview": "# useToggle\n\nA hook that encapsulates the business logic of dealing with boolean values.\n\nProvides a higher-level interf"
},
{
"path": "docs/useTouch.md",
"chars": 4104,
"preview": "# useTouch\n\nA hook that combines the functionalities of [useTouchState](./useTouchState.md) and [useTouchEvents](./useTo"
},
{
"path": "docs/useTouchEvents.md",
"chars": 5339,
"preview": "# useTouchEvents\n\nA hook that provides an easy way to manage touch events by returning a set of callback setters. The re"
},
{
"path": "docs/useTouchState.md",
"chars": 3116,
"preview": "# useTouchState\n\nA hook that returns relevant properties from the last touch event, such as clientX and clientY. To ensu"
},
{
"path": "docs/useURLSearchParams.md",
"chars": 1497,
"preview": "# useURLSearchParams\n\nA hook that encapsulates the functionality of retrieving an always updated URLSearchParams object."
},
{
"path": "docs/useUnmount.md",
"chars": 2690,
"preview": "# useUnmount\n\nA hook that takes in a function to execute right when the component unmounts.\n\n### Why? 💡\n\n- takes care of"
},
{
"path": "docs/useUpdateEffect.md",
"chars": 1509,
"preview": "# useUpdateEffect\n\nA hook that modifies the behavior of the `useEffect` hook by skipping the initial render. This hook i"
},
{
"path": "docs/useValidatedState.md",
"chars": 1798,
"preview": "# useValidatedState\n\nThis hook is similar to useState but accepts a validator function as first parameter and the initia"
},
{
"path": "docs/useValueHistory.md",
"chars": 1520,
"preview": "# useValueHistory\n\nA hook that takes a variable, which can be a prop or a state, and returns an array of its previous va"
},
{
"path": "docs/useVerticalSwipe.md",
"chars": 159,
"preview": "# useVerticalSwipe\n\nReturns the state of the vertical swipe gesture both on mobile or desktop.<br/>\nIt is intended as a "
},
{
"path": "docs/useViewportSpy.md",
"chars": 2880,
"preview": "# useViewportSpy\n\nA hook that uses the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersect"
},
{
"path": "docs/useViewportState.md",
"chars": 1681,
"preview": "# useViewportState\n\nA hook that returns relevant information on the current viewport state.\n\nIt's built on top of [useWi"
},
{
"path": "docs/useWillUnmount.md",
"chars": 2718,
"preview": "# useWillUnmount\n\nA hook that takes in a function to execute right before the component unmounts.\n\n### Why? 💡\n\n- takes c"
},
{
"path": "docs/useWindowResize.md",
"chars": 4217,
"preview": "# useWindowResize\n\nA hook that receives a callback function to execute on the window's resize event.\n\nIt's built on top "
},
{
"path": "docs/useWindowScroll.md",
"chars": 3578,
"preview": "# useWindowScroll\n\nA hook that receives a callback function to execute on the window's scroll event.\n\nIt's built on top "
},
{
"path": "docs/utils/_CustomLogo.js",
"chars": 559,
"preview": "import React from 'react'\nimport PropTypes from 'prop-types'\nimport Styled from 'rsg-components/Styled'\nimport logo from"
},
{
"path": "docs/utils/_EmptyComponent.js",
"chars": 27,
"preview": "export default () => null;\n"
},
{
"path": "docs/utils/_custom.css",
"chars": 191,
"preview": "@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i&display=swap');\n@import "
},
{
"path": "docs/utils/_setup.js",
"chars": 212,
"preview": "const React = require('react')\nconst { Card } = require('antd')\n\nconst DisplayDemo = window.DisplayDemo = (props) => (\n "
},
{
"path": "docs/utils/_styleguidist.theme.js",
"chars": 1301,
"preview": "module.exports = {\n // https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts\n them"
},
{
"path": "package.json",
"chars": 13794,
"preview": "{\n \"name\": \"beautiful-react-hooks\",\n \"version\": \"5.1.0\",\n \"description\": \"A collection of beautiful (and hopefully us"
},
{
"path": "scripts/commit-version.sh",
"chars": 140,
"preview": "#!/bin/bash\n\ncd ..\ngit add package.json\ngit commit -m \"chore(release): Updates package.json version to $1 [skip ci]\"\ngit"
},
{
"path": "scripts/generate-doc-append-types.js",
"chars": 1293,
"preview": "const fs = require('fs/promises')\nconst path = require('path')\nconst { globSync } = require('glob')\n\nconst docsPath = pa"
},
{
"path": "scripts/generate-exports.js",
"chars": 846,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst path = require('path')\nconst { globSync } = require('glob')\n\nconst srcPath "
},
{
"path": "scripts/update-version.js",
"chars": 463,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst path = require('path')\n\nconst nextVersion = process.argv[2]\nconst pkgPath ="
},
{
"path": "src/factory/createHandlerSetter.ts",
"chars": 1359,
"preview": "import { type RefObject, useRef } from 'react'\nimport { type CallbackSetter, type SomeCallback } from '../shared/types.t"
},
{
"path": "src/factory/createStorageHook.ts",
"chars": 2227,
"preview": "import { useCallback, useState } from 'react'\nimport safelyParseJson from '../shared/safelyParseJson.ts'\nimport isClient"
},
{
"path": "src/shared/geolocationUtils.ts",
"chars": 1477,
"preview": "import { type BRHGeolocationPosition } from './types.ts'\n\nexport const geoStandardOptions: PositionOptions = Object.free"
},
{
"path": "src/shared/isAPISupported.ts",
"chars": 223,
"preview": "/**\n * Exports a boolean value reporting whether the given API is supported or not\n */\nconst isApiSupported = (api: stri"
},
{
"path": "src/shared/isClient.ts",
"chars": 248,
"preview": "/**\n * Exports a boolean value reporting whether is client side or server side by checking on the window object\n */\ncons"
},
{
"path": "src/shared/isDevelopment.ts",
"chars": 196,
"preview": "const isDevelopment = (\n typeof process !== 'undefined' && typeof process.env !== 'undefined' && (!process.env.NODE_ENV"
},
{
"path": "src/shared/isFunction.ts",
"chars": 290,
"preview": "type SomeFunction = (...args: any[]) => any\n\nconst isFunction = (functionToCheck: unknown): functionToCheck is SomeFunct"
},
{
"path": "src/shared/noop.ts",
"chars": 193,
"preview": "import { type Noop } from './types.ts'\n\n/* eslint-disable-next-line @typescript-eslint/no-unused-vars */\nconst noop: Noo"
},
{
"path": "src/shared/safeHasOwnProperty.ts",
"chars": 163,
"preview": "const safeHasOwnProperty = (obj: any, prop: string): boolean => (obj ? Object.prototype.hasOwnProperty.call(obj, prop) :"
},
{
"path": "src/shared/safelyParseJson.ts",
"chars": 259,
"preview": "/**\n * Safely parse JSON string to object or null\n * @param parseString\n */\nconst safelyParseJson = <T = any>(parseStrin"
},
{
"path": "src/shared/swipeUtils.ts",
"chars": 1056,
"preview": "/**\n * Takes a mouse or a touch events and returns clientX and clientY values\n * @param event\n * @return {[undefined, un"
},
{
"path": "src/shared/types.ts",
"chars": 1445,
"preview": "export interface Noop {\n noop: true\n\n (...args: any[]): any\n}\n\n/**\n * Represent a generic function.\n * Used internally"
},
{
"path": "src/shared/warnOnce.ts",
"chars": 386,
"preview": "const cache = new Map()\n\n/**\n * A tiny wrapper around console.warn that makes sure the message is only displayed once.\n "
},
{
"path": "src/useAudio.ts",
"chars": 7411,
"preview": "import { type MutableRefObject, useCallback, useEffect, useRef } from 'react'\nimport noop from './shared/noop.ts'\nimport"
},
{
"path": "src/useConditionalTimeout.ts",
"chars": 2149,
"preview": "import { useCallback, useEffect, useRef, useState } from 'react'\nimport isFunction from './shared/isFunction.ts'\nimport "
},
{
"path": "src/useCookie.ts",
"chars": 3396,
"preview": "import { useCallback, useEffect, useState } from 'react'\nimport noop from './shared/noop.ts'\nimport isClient from './sha"
},
{
"path": "src/useDarkMode.ts",
"chars": 1659,
"preview": "import { useCallback } from 'react'\nimport useMediaQuery from './useMediaQuery.ts'\nimport useUpdateEffect from './useUpd"
},
{
"path": "src/useDebouncedCallback.ts",
"chars": 1222,
"preview": "import { type DependencyList, useCallback, useEffect, useRef } from 'react'\nimport debounce from 'lodash.debounce'\nimpor"
},
{
"path": "src/useDefaultedState.ts",
"chars": 674,
"preview": "import { useCallback, useState } from 'react'\n\nconst maybeState = <TValue>(state: TValue, defaultValue?: TValue) => (sta"
},
{
"path": "src/useDidMount.ts",
"chars": 722,
"preview": "import { useEffect, useRef } from 'react'\nimport isFunction from './shared/isFunction.ts'\nimport { type GenericFunction,"
},
{
"path": "src/useDrag.ts",
"chars": 1329,
"preview": "import { type RefObject, useState } from 'react'\nimport useDragEvents from './useDragEvents.ts'\n\nexport interface UseDra"
},
{
"path": "src/useDragEvents.ts",
"chars": 2121,
"preview": "import { type RefObject, useEffect } from 'react'\nimport safeHasOwnProperty from './shared/safeHasOwnProperty.ts'\nimport"
},
{
"path": "src/useDropZone.ts",
"chars": 729,
"preview": "import { type RefObject, useState } from 'react'\nimport useDragEvents from './useDragEvents.ts'\nimport { type CallbackSe"
},
{
"path": "src/useEvent.ts",
"chars": 1284,
"preview": "import { type RefObject, useEffect } from 'react'\nimport createHandlerSetter from './factory/createHandlerSetter.ts'\nimp"
},
{
"path": "src/useGeolocation.ts",
"chars": 798,
"preview": "import useGeolocationState, { type UseGeolocationStateResult } from './useGeolocationState.ts'\nimport useGeolocationEven"
},
{
"path": "src/useGeolocationEvents.ts",
"chars": 2137,
"preview": "import { useEffect, useMemo, useRef } from 'react'\nimport createHandlerSetter from './factory/createHandlerSetter.ts'\nim"
},
{
"path": "src/useGeolocationState.ts",
"chars": 2759,
"preview": "import { useCallback, useEffect, useState } from 'react'\nimport createHandlerSetter from './factory/createHandlerSetter."
},
{
"path": "src/useGlobalEvent.ts",
"chars": 712,
"preview": "import { type RefObject } from 'react'\nimport useEvent from './useEvent.ts'\nimport isClient from './shared/isClient.ts'\n"
},
{
"path": "src/useHorizontalSwipe.ts",
"chars": 564,
"preview": "import { type RefObject } from 'react'\nimport useSwipe, { type UseSwipeOptions } from './useSwipe.ts'\n\nconst defaultOpti"
},
{
"path": "src/useInfiniteScroll.ts",
"chars": 1508,
"preview": "import { type RefObject, useRef } from 'react'\nimport useEvent from './useEvent.ts'\nimport isFunction from './shared/isF"
},
{
"path": "src/useInterval.ts",
"chars": 1668,
"preview": "import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport isFunction from './shared/isFunction.ts'\nimport"
},
{
"path": "src/useIsFirstRender.ts",
"chars": 268,
"preview": "import { useRef } from 'react'\n\nconst useIsFirstRender = () => {\n const isFirstRenderRef = useRef(true)\n\n if (isFirstR"
},
{
"path": "src/useLifecycle.ts",
"chars": 640,
"preview": "import useDidMount from './useDidMount.ts'\nimport useWillUnmount from './useWillUnmount.ts'\nimport { type GenericFunctio"
},
{
"path": "src/useLocalStorage.ts",
"chars": 188,
"preview": "import createStorageHook from './factory/createStorageHook.ts'\n\n/**\n * Save a value on local storage\n */\nconst useLocalS"
},
{
"path": "src/useLongPress.ts",
"chars": 2114,
"preview": "import { type RefObject, useCallback, useState } from 'react'\nimport useMouseEvents from './useMouseEvents.ts'\nimport us"
},
{
"path": "src/useMediaQuery.ts",
"chars": 1786,
"preview": "import { useEffect, useState } from 'react'\nimport isClient from './shared/isClient.ts'\nimport isAPISupported from './sh"
},
{
"path": "src/useMouse.ts",
"chars": 614,
"preview": "import { type RefObject } from 'react'\nimport useMouseEvents from './useMouseEvents.ts'\nimport useMouseState from './use"
},
{
"path": "src/useMouseEvents.ts",
"chars": 1805,
"preview": "import { type RefObject } from 'react'\nimport useEvent from './useEvent.ts'\n\n/**\n * Returns a frozen object of callback "
},
{
"path": "src/useMouseState.ts",
"chars": 864,
"preview": "import { type RefObject, useState } from 'react'\nimport useMouseEvents from './useMouseEvents.ts'\n\nconst createStateObje"
},
{
"path": "src/useMutableState.ts",
"chars": 706,
"preview": "import { useMemo, useState } from 'react'\n\n/**\n * Returns a reactive value that can be used as a state.\n */\nconst useMut"
},
{
"path": "src/useMutationObserver.ts",
"chars": 1207,
"preview": "import { type RefObject, useEffect } from 'react'\n\nimport isClient from './shared/isClient.ts'\nimport isApiSupported fro"
},
{
"path": "src/useObjectState.ts",
"chars": 630,
"preview": "import { useCallback, useReducer } from 'react'\n\nconst reducer = <TState>(\n previousState: TState,\n updatedState: Part"
},
{
"path": "src/useObservable.ts",
"chars": 487,
"preview": "import { useEffect } from 'react'\nimport { type Observable, type Observer } from 'rxjs'\n\n/**\n * Hook, which helps you co"
},
{
"path": "src/useOnlineState.ts",
"chars": 1090,
"preview": "import { useState } from 'react'\nimport useGlobalEvent from './useGlobalEvent.ts'\nimport warnOnce from './shared/warnOnc"
},
{
"path": "src/usePreviousValue.ts",
"chars": 421,
"preview": "import { useEffect, useRef } from 'react'\n\n/**\n * On each render returns the previous value of the given variable/consta"
},
{
"path": "src/useQueryParam.ts",
"chars": 1286,
"preview": "import { useCallback, useRef } from 'react'\nimport { useHistory } from 'react-router-dom'\nimport useDidMount from './use"
},
{
"path": "src/useQueryParams.ts",
"chars": 1361,
"preview": "import { useHistory } from 'react-router-dom'\nimport { useCallback, useRef } from 'react'\nimport useDidMount from './use"
},
{
"path": "src/useRenderInfo.ts",
"chars": 987,
"preview": "import { useRef } from 'react'\n\nexport interface RenderInfo {\n readonly module: string\n renders: number\n timestamp: n"
},
{
"path": "src/useRequestAnimationFrame.ts",
"chars": 1933,
"preview": "import { useCallback, useRef } from 'react'\nimport createHandlerSetter from './factory/createHandlerSetter.ts'\nimport is"
},
{
"path": "src/useResizeObserver.ts",
"chars": 2175,
"preview": "import debounce from 'lodash.debounce'\nimport { type RefObject, useEffect, useRef, useState } from 'react'\n\nimport isCli"
},
{
"path": "src/useSearchQuery.ts",
"chars": 408,
"preview": "import useQueryParam from './useQueryParam.ts'\n\n/**\n * Ease the process of modify the 'search' query string in the URL f"
},
{
"path": "src/useSessionStorage.ts",
"chars": 196,
"preview": "import createStorageHook from './factory/createStorageHook.ts'\n\n/**\n * Save a value on session storage\n */\nconst useSess"
},
{
"path": "src/useSpeechRecognition.ts",
"chars": 2378,
"preview": "import { useCallback, useEffect, useMemo, useState } from 'react'\n\ndeclare global {\n interface SpeechRecognitionEvent e"
},
{
"path": "src/useSpeechSynthesis.ts",
"chars": 1588,
"preview": "import { useCallback, useEffect, useMemo } from 'react'\n\n/**\n * The options that can be passed to the hook\n * @see https"
},
{
"path": "src/useSwipe.ts",
"chars": 4512,
"preview": "import { type RefObject, useRef, useState } from 'react'\nimport { type Direction, getDirection, getHorizontalDirection, "
},
{
"path": "src/useSwipeEvents.ts",
"chars": 6040,
"preview": "import { type RefObject, useEffect, useRef, useState } from 'react'\nimport isFunction from './shared/isFunction.ts'\nimpo"
},
{
"path": "src/useSystemVoices.ts",
"chars": 316,
"preview": "/**\n * Returns all the available voices on the system.\n * This hook is here to backward compatibility with the previous "
},
{
"path": "src/useThrottledCallback.ts",
"chars": 1205,
"preview": "import { type DependencyList, useCallback, useEffect, useRef } from 'react'\nimport throttle from 'lodash.throttle'\nimpor"
},
{
"path": "src/useTimeout.ts",
"chars": 1622,
"preview": "import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport isFunction from './shared/isFunction.ts'\nimport"
},
{
"path": "src/useToggle.ts",
"chars": 360,
"preview": "import { useCallback, useState } from 'react'\n\n/**\n * A quick and simple utility for toggle states\n */\nconst useToggle ="
},
{
"path": "src/useTouch.ts",
"chars": 715,
"preview": "import { type RefObject } from 'react'\nimport useTouchEvents, { type UseTouchEventsReturn } from './useTouchEvents.ts'\ni"
},
{
"path": "src/useTouchEvents.ts",
"chars": 1876,
"preview": "import { type RefObject } from 'react'\nimport useEvent from './useEvent.ts'\nimport { type CallbackSetter } from './share"
},
{
"path": "src/useTouchState.ts",
"chars": 809,
"preview": "import { type RefObject, useState } from 'react'\nimport useTouchEvents from './useTouchEvents.ts'\n\n/**\n * Returns the cu"
},
{
"path": "src/useURLSearchParams.ts",
"chars": 329,
"preview": "import { useMemo } from 'react'\nimport { useLocation } from 'react-router-dom'\n\n/**\n * Wraps the business logic of retri"
},
{
"path": "src/useUnmount.ts",
"chars": 750,
"preview": "import { useEffect, useRef } from \"react\";\nimport isFunction from \"./shared/isFunction.ts\";\nimport { type GenericFunctio"
},
{
"path": "src/useUpdateEffect.ts",
"chars": 492,
"preview": "import { type DependencyList, type EffectCallback, useEffect } from 'react'\nimport useIsFirstRender from './useIsFirstRe"
},
{
"path": "src/useValidatedState.ts",
"chars": 848,
"preview": "import { useCallback, useRef, useState } from 'react'\n\n/**\n * Returns a state that changes only if the next value pass i"
},
{
"path": "src/useValueHistory.ts",
"chars": 620,
"preview": "import { useEffect, useRef } from 'react'\n\nconst distinctValues = <T>(value: T, current: number, array: T[]): boolean =>"
},
{
"path": "src/useVerticalSwipe.ts",
"chars": 667,
"preview": "import { type RefObject } from 'react'\nimport useSwipe, { type UseSwipeOptions } from './useSwipe.ts'\n\nconst defaultOpti"
},
{
"path": "src/useViewportSpy.ts",
"chars": 1551,
"preview": "import { type RefObject, useLayoutEffect, useState } from 'react'\nimport isClient from './shared/isClient.ts'\nimport isA"
},
{
"path": "src/useViewportState.ts",
"chars": 1034,
"preview": "import { useState } from 'react'\nimport useWindowScroll from './useWindowScroll.ts'\nimport useWindowResize from './useWi"
},
{
"path": "src/useWillUnmount.ts",
"chars": 754,
"preview": "import { useLayoutEffect, useRef } from 'react'\nimport isFunction from './shared/isFunction.ts'\nimport { type GenericFun"
},
{
"path": "src/useWindowResize.ts",
"chars": 240,
"preview": "import useGlobalEvent from './useGlobalEvent.ts'\n\n/**\n * Returns a function that accepts a callback to be performed when"
},
{
"path": "src/useWindowScroll.ts",
"chars": 241,
"preview": "import useGlobalEvent from './useGlobalEvent.ts'\n\n/**\n * Returns a function that accepts a callback to be performed when"
},
{
"path": "styleguide.config.js",
"chars": 1786,
"preview": "const { globSync } = require('glob')\nconst path = require('path')\nconst theme = require('./docs/utils/_styleguidist.them"
},
{
"path": "test/_setup.js",
"chars": 460,
"preview": "const chai = require('chai')\nconst sinon = require('sinon')\nconst { createMemoryHistory } = require('history')\n\nglobal.h"
},
{
"path": "test/geolocationUtils.spec.js",
"chars": 2115,
"preview": "import { geoStandardOptions, isSamePosition, makePositionObj } from '../dist/shared/geolocationUtils'\nimport { positionM"
},
{
"path": "test/isAPISupported.spec.js",
"chars": 340,
"preview": "import isAPISupported from '../dist/shared/isAPISupported'\nimport assertFunction from './utils/assertFunction'\n\ndescribe"
},
{
"path": "test/isClient.spec.js",
"chars": 234,
"preview": "import isClient from '../dist/shared/isClient'\n\ndescribe('isClient utility', () => {\n it('should be a boolean', () => e"
},
{
"path": "test/mocks/AudioApi.mock.js",
"chars": 451,
"preview": "class AudioApiMock extends window.Audio {\n src;\n state;\n duration;\n playing;\n constructor() {\n super();\n\n thi"
},
{
"path": "test/mocks/CookieStoreApi.mock.js",
"chars": 473,
"preview": "const createCookieStoreApiMock = () => {\n const store = {};\n\n const getItem = (key) => {\n return Promise.resolve({ "
},
{
"path": "test/mocks/GeoLocationApi.mock.js",
"chars": 683,
"preview": "export const watchPositionSpy = sinon.spy()\nexport const getCurrentPosition = sinon.spy()\n\nexport const positionMock = {"
},
{
"path": "test/mocks/IntersectionObserver.mock.js",
"chars": 506,
"preview": "class IntersectionObserverMock {\n constructor(fn) {\n this.connected = true\n this.fn = fn\n\n IntersectionObserve"
},
{
"path": "test/mocks/MatchMediaQueryList.mock.js",
"chars": 222,
"preview": "const matchMediaQueryListMock = {\n listeners: {},\n matches: true,\n addEventListener(cb) {\n this.listeners.cb = cb\n"
},
{
"path": "test/mocks/ResizeObserver.mock.js",
"chars": 583,
"preview": "class ResizeObserverMock {\n constructor(fn) {\n this.fn = fn\n ResizeObserverMock.instances.push(this)\n }\n\n obser"
},
{
"path": "test/mocks/SpeechSynthesis.mock.js",
"chars": 54,
"preview": "export default {\n getVoices() {\n return []\n }\n}\n\n"
},
{
"path": "test/mocks/SpeechSynthesisUtterance.mock.js",
"chars": 178,
"preview": "export default class SpeechSynthesisUtteranceMock {\n constructor(text) {\n this.text = text\n this.voice = {}\n t"
},
{
"path": "test/safeHasOwnProperty.spec.js",
"chars": 712,
"preview": "import safeHasOwnProperty from '../dist/shared/safeHasOwnProperty'\nimport assertFunction from './utils/assertFunction'\n\n"
},
{
"path": "test/useAudio.spec.js",
"chars": 2427,
"preview": "import {\n cleanup,\n renderHook,\n} from \"@testing-library/react-hooks\";\n\nimport useAudio from \"../dist/useAudio\";\nimpor"
},
{
"path": "test/useConditionalTimeout.spec.js",
"chars": 3593,
"preview": "import React from 'react'\nimport { cleanup as cleanupReact, render } from '@testing-library/react'\nimport { act, cleanup"
},
{
"path": "test/useCookie.spec.js",
"chars": 2531,
"preview": "import React from 'react'\nimport { cleanup as cleanupReact, render } from '@testing-library/react'\nimport { cleanup as c"
},
{
"path": "test/useDarkMode.spec.js",
"chars": 2398,
"preview": "import { cleanup, renderHook } from '@testing-library/react-hooks'\n\nimport assertHook from './utils/assertHook'\nimport u"
},
{
"path": "test/useDebouncedCallback.spec.js",
"chars": 2048,
"preview": "import React from 'react'\nimport { cleanup as cleanupHooks, renderHook } from '@testing-library/react-hooks'\nimport { cl"
},
{
"path": "test/useDefaultedState.spec.js",
"chars": 647,
"preview": "import { cleanup, renderHook } from '@testing-library/react-hooks'\nimport useDefaultedState from '../dist/useDefaultedSt"
},
{
"path": "test/useDidMount.spec.js",
"chars": 913,
"preview": "import React from 'react'\nimport { cleanup as cleanupReact, render } from '@testing-library/react'\nimport { cleanup as c"
},
{
"path": "test/useDrag.spec.js",
"chars": 495,
"preview": "import { cleanup, renderHook } from '@testing-library/react-hooks'\nimport useDrag from '../dist/useDrag'\nimport assertHo"
},
{
"path": "test/useDragEvents.spec.js",
"chars": 3139,
"preview": "import React, { useRef } from 'react'\nimport { cleanup as cleanupReact, fireEvent, render } from '@testing-library/react"
},
{
"path": "test/useDropZone.spec.js",
"chars": 557,
"preview": "import { cleanup, renderHook } from '@testing-library/react-hooks'\nimport useDropZone from '../dist/useDropZone'\nimport "
}
]
// ... and 59 more files (download for full content)
About this extraction
This page contains the full source code of the antonioru/beautiful-react-hooks GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 259 files (480.4 KB), approximately 127.8k tokens, and a symbol index with 75 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.