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 ================================================ ## Description ## Related Issue ## Motivation and Context ## How Has This Been Tested? ## 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, 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.
What if the status checks are failing?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.
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 `, `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; }; ``` ### Use cases description of the use case ```jsx harmony import { yourHook } from 'beautiful-react-hooks'; const YourUseCase = () => { /* Your code goes here */ return null; }; ``` ### Mastering the hooks #### ✅ When to use - When it's good to use #### 🛑 When not to use - When it's not good to use ================================================ 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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


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

🌟 Hooks Playground 🌟

![Usage example](./usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 | 🇹🇷 Türkçe ## 💡 Why? Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.\ I have noticed that many of the hooks I have created and shared across projects involve callbacks, references, events, and dealing with the component lifecycle.\ Therefore, I have created `beautiful-react-hooks`, a collection of useful [React hooks](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

🌟 Hooks Playground 🌟

## 🕺 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)

🌟 Hooks Playground 🌟

## Peer dependencies Some hooks are built using third-party libraries (such as rxjs, react-router-dom, redux). As a result, you will see these libraries listed as peer dependencies.\ Unless you are using these hooks directly, you need not install these dependencies. ## Contributing Contributions are very welcome and wanted. To submit your custom hook, make sure you have thoroughly read and understood the [CONTRIBUTING](./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`. For example: ```ts static import { ref } from 'react'; const myCustomHook = () => { const ref = useRef(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 [![Build Status](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks.svg?branch=master)](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social) `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.
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 ## ☕️ 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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


Una colección de hermosos (y ojalá que útiles) hooks de React para acelerar tu desarrollo de componentes y hooks

![Usage example](../usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 ## 💡 Por qué? React custom hooks permite abstraer la lógica de negocio de los componentes en funciones únicas reutilizables.
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).
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.

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. ## 🕺 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) ## 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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


Una collezione di hooks leggeri (e si spera utili) per velocizzare lo sviluppo di hooks personalizzati e componenti React

![Usage example](../usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 In un'applicazione React, gli hooks ci permettono di astrarre complesse logiche di business in singole funzioni riutilizzabili.
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).
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.

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 ## 🕺 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) ## 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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


コンポーネントやフック開発を高速化するための、美しい（できれば便利な） React フックのコレクションです。

![Usage example](../usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 ## 💡 なぜ? React のカスタムフックは抽象的なコンポーネントのビジネスロジックを単一な再利用可能な関数とする事が出来ます。
これまでのところ、私たちが作成し、内部で共有されているフックの大半はかなりの頻度でコールバック参照、イベントとコンポーネントのライフサイクルに関して類似する点がある事が分かっています。
この理由から、私たちはそれらの知見を企業や専門家が開発プロセスをスピードアップするのに役立つ（*できれば*）便利な React フックのコレクションとして `beautiful-react-hooks` にまとめました。

さらに、コードの読みやすさを考慮して、簡潔かつ具体的な API を作成しました。 より大きなチームで使用し、共有できるように、学習曲線を可能な限り低く抑える事が可能です。 **-- フックを利用する前に、ドキュメントを確認して下さい！ --** ## ☕️ 特徴 * 簡潔な API * 軽量 * 学習が容易 ## 🕺 インストール `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) ## 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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


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.

![Usage example](../usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 ## 💡 Dlaczego? W aplikacji React hooki pozwalają na wyodrębnienie logiki biznesowej komponentów do pojedyńczych funkcji wielokrotnego użytku.
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.
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.

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 ## 🕺 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) ## 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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


Uma coleção de React hooks lindos (e esperamos que úteis) para acelerar o desenvolvimento de seus componentes e hooks

![Exemplo de uso](../usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 ## 💡 Por quê? React hooks permitem a abstrair a lógica de negócios dos componentes em funções únicas e reutilizáveis.
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.
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.

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 ## 🕺 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) ## 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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


Geliştirme sürecinizi hızlandırmak ve daha verimli hale getirmek için özel olarak hazırlanmış React hooklar koleksiyonu.

![Usage example](../usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 | 🇹🇷 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 ## 🕺 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) ## 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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


Колекція красивих (також надіємось що корисних) Реакт хуків, для прискорення розробки ваших компонентів та хуків.

![Usage example](../usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 ## 💡 Чому? Кастомні Реакт хуки дозволяють абстрагувати бізнес логіку компонентів в окремі функції багаторазового використання.
Досі, ми зауважили, що більшість хуків які ми створили і після цього поширили між нашими внутрішніми проектами, досить часто мають аналогічну суть, що включають в себе виклик колбек функцій, подій та життєвих циклів компонентів.
З цієї причини, ми спробували реалізувати цю суть в `beautiful-react-hooks`: колекцію (*сподіваємось*) корисних Реакт хуків, для того щоб допомогти іншим компаніям та професіоналам пришвидшити їхній процес розробки.

Крім того, ми створили лаконічний, але конкретний API, з точки зору читабельності коду, маючи на меті тримати криву вивчення настільки низькою, наскільки це можливо, тому це може бути використано та поширено у великих командах. **-- Будь-ласка, перед використанням будь-яких хуків, прочитайте їхню документацію! --** ## ☕️ Особливості * Лаконічний API * Малий розмір та легкість * Простий у вивченні ## 🕺 Встановлення Використовуючи `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) ## Внески Ваші внески в проект дуже вітаються та потрібні. Але для подання ваших кастомних хуків, переконайтесь що ви ознайомились з нашим гайдом для [ВНЕСКІВ](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 ================================================ ![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![npm](https://img.shields.io/npm/v/beautiful-react-hooks) ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks


可以显著为你提升组件开发和 hooks 开发效率的一系列漂亮（说不定也是才貌双全）的 React hooks。

![Usage example](../usage_example.png) 🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 ## 💡 为什么? React hooks 让我们能把组件的业务逻辑抽象到一个可重用的函数里。
根据到目前为止的使用经验，我们发现：我们创建并在内部项目之间复用的大多数 hooks 通常都有一些共同的写法，涉及回调引用、事件或是组件生命周期。
发现这一点后，我们尝试把这些常用的写法抽出来放进 `beautiful-react-hooks` —— 一系列 _（说不定）_ 有用的 React hooks —— 来帮助其他公司和专家们加速他们的开发。

此外，我们创建了简明而稳固的 API，时刻牢记代码可阅读性，专注于保持学习曲线越低越好，以便它们可以被更大的团队分享和使用。 **-- 请在使用任何 hook 之前读完它的文档！ --** ## ☕️ 功能 - 简明的 API - 小巧轻量 - 易于学习 ## 🕺 安装 使用 `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) ## 如何贡献 我们非常欢迎而且期待着你的开源贡献。 如果想要提交你的自定义 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 `