diff --git a/.changeset/brown-bears-cheat.md b/.changeset/brown-bears-cheat.md new file mode 100644 index 0000000..70be95e --- /dev/null +++ b/.changeset/brown-bears-cheat.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': patch +--- + +build: upgrade from tsup to tsdown bundler diff --git a/.changeset/brown-wolves-play.md b/.changeset/brown-wolves-play.md new file mode 100644 index 0000000..26b3930 --- /dev/null +++ b/.changeset/brown-wolves-play.md @@ -0,0 +1,21 @@ +--- +'classic-react-hooks': minor +--- + +## Major Rewrite for the Documentation +- home page and overview +- use-can-reach-to-internet +- use-copy-to-clipboard +- use-counter +- use-debounced-fn +- use-event-listener +- use-intersection-observer +- use-multi-intersection-observer +- use-interval-effect +- use-on-mount-effect +- use-outside-effect +- use-synced-effect +- use-synced-ref +- use-throttled-fn +- use-timeout-effect +- use-window-resize diff --git a/.changeset/clean-coats-occur.md b/.changeset/clean-coats-occur.md new file mode 100644 index 0000000..321d05b --- /dev/null +++ b/.changeset/clean-coats-occur.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +Doc update diff --git a/.changeset/cool-emus-lie.md b/.changeset/cool-emus-lie.md new file mode 100644 index 0000000..21fb956 --- /dev/null +++ b/.changeset/cool-emus-lie.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': patch +--- + +Docs: Update features and overview section diff --git a/.changeset/cool-spoons-fold.md b/.changeset/cool-spoons-fold.md new file mode 100644 index 0000000..818efa7 --- /dev/null +++ b/.changeset/cool-spoons-fold.md @@ -0,0 +1,6 @@ +--- +'classic-react-hooks': minor +--- + +Feature: +- Add cross-tab sync and ssr support and function based initial value support for `useLocalStorage` hook. diff --git a/.changeset/cuddly-melons-turn.md b/.changeset/cuddly-melons-turn.md new file mode 100644 index 0000000..fbb3420 --- /dev/null +++ b/.changeset/cuddly-melons-turn.md @@ -0,0 +1,10 @@ +--- +'classic-react-hooks': minor +--- + + +- Doc: Add `what problem it solves` doc for useCanReachToInternet +- Doc: Refactor the docs for hooks + + + diff --git a/.changeset/early-apes-march.md b/.changeset/early-apes-march.md new file mode 100644 index 0000000..bcc640e --- /dev/null +++ b/.changeset/early-apes-march.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': patch +--- + +- Update dependencies, pnpm and node version for better security and performance diff --git a/.changeset/eight-webs-look.md b/.changeset/eight-webs-look.md new file mode 100644 index 0000000..59c11c1 --- /dev/null +++ b/.changeset/eight-webs-look.md @@ -0,0 +1,7 @@ +--- +'classic-react-hooks': minor +--- + +New api and props for use-debounced-fn +- Introduce cleanup and debouncedFn return value +- Introduce immediateCallback, onSuccess, onError and onFinally callback as lifecycle functions diff --git a/.changeset/fresh-hounds-move.md b/.changeset/fresh-hounds-move.md new file mode 100644 index 0000000..385ac7b --- /dev/null +++ b/.changeset/fresh-hounds-move.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': patch +--- + +Include src folder in npm publish diff --git a/.changeset/good-vans-impress.md b/.changeset/good-vans-impress.md new file mode 100644 index 0000000..f77dbf2 --- /dev/null +++ b/.changeset/good-vans-impress.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +Add CanReachToInterernetCtxProvder and useCanReachToInternetCtx component's documentation diff --git a/.changeset/hungry-moons-serve.md b/.changeset/hungry-moons-serve.md new file mode 100644 index 0000000..50d848a --- /dev/null +++ b/.changeset/hungry-moons-serve.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- +Feat: Introduce `layoutEffect` boolean prop in use-event-listener hook to pickup `useEffect` between `useLayoutEffect`. By default `useEffect` hook will be used. +Feat: Using layoutEffect for use-window-resize hook. diff --git a/.changeset/icy-boats-make.md b/.changeset/icy-boats-make.md new file mode 100644 index 0000000..283b98e --- /dev/null +++ b/.changeset/icy-boats-make.md @@ -0,0 +1,7 @@ +--- +'classic-react-hooks': major +--- + +Breaking +- v2 release prepare +- Rewrite all of the hooks and their documenation diff --git a/.changeset/mighty-donkeys-roll.md b/.changeset/mighty-donkeys-roll.md new file mode 100644 index 0000000..d2065d6 --- /dev/null +++ b/.changeset/mighty-donkeys-roll.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +ref: Initialize context lazily within ContextProvider component for can-reach-to-internet-context diff --git a/.changeset/modern-ants-add.md b/.changeset/modern-ants-add.md new file mode 100644 index 0000000..0ae5fd6 --- /dev/null +++ b/.changeset/modern-ants-add.md @@ -0,0 +1,7 @@ +--- +'classic-react-hooks': minor +--- + + +- breaking: use the implementation and working for `useIntersection` observer hook. +- feat: introduce new hook `useMultiIntersectionObserver` hook. \ No newline at end of file diff --git a/.changeset/moody-pens-poke.md b/.changeset/moody-pens-poke.md new file mode 100644 index 0000000..662995a --- /dev/null +++ b/.changeset/moody-pens-poke.md @@ -0,0 +1,12 @@ +--- +'classic-react-hooks': minor +--- + + +## Fixes following issues +- Fix: use-can-reach-to-internet `subscribe` handler for `useSyncExternalStore`. It was adding events instead of removing. +- Fix: Prevent from re-triggering the call of `checkIfCanReachToInternet` function in useEffect when `isNetworkPollingEnabled` is disabled. + +## Test cases +- Wrote test cases for use-can-reach-to-internet and use-copy-to-clipboard hook. Previously not written. + diff --git a/.changeset/pink-pugs-eat.md b/.changeset/pink-pugs-eat.md new file mode 100644 index 0000000..1f06d8e --- /dev/null +++ b/.changeset/pink-pugs-eat.md @@ -0,0 +1,7 @@ +--- +'classic-react-hooks': minor +--- + +- breaking: remove useIsOnline hook +- Feat: add useCanReachToInternet for getting network connection +- Feat: add useCanReachToInternetCtx and CanReachToInternetCtxProvider for subscribing the application to get network reachability with context \ No newline at end of file diff --git a/.changeset/popular-students-happen.md b/.changeset/popular-students-happen.md new file mode 100644 index 0000000..d63ba9f --- /dev/null +++ b/.changeset/popular-students-happen.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': patch +--- + +Add canary branch in CI release diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000..cb9634f --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,37 @@ +{ + "mode": "pre", + "tag": "canary", + "initialVersions": { + "classic-react-hooks": "1.4.0" + }, + "changesets": [ + "brown-bears-cheat", + "brown-wolves-play", + "clean-coats-occur", + "cool-emus-lie", + "cool-spoons-fold", + "cuddly-melons-turn", + "early-apes-march", + "eight-webs-look", + "fresh-hounds-move", + "good-vans-impress", + "hungry-moons-serve", + "icy-boats-make", + "mighty-donkeys-roll", + "modern-ants-add", + "moody-pens-poke", + "pink-pugs-eat", + "popular-students-happen", + "silver-radios-tickle", + "slick-carrots-stick", + "spotty-jeans-carry", + "stale-radios-rule", + "tender-sites-occur", + "thirty-foxes-wink", + "twenty-pans-search", + "violet-cherries-applaud", + "warm-olives-punch", + "wet-states-wink", + "yellow-nails-worry" + ] +} diff --git a/.changeset/silver-radios-tickle.md b/.changeset/silver-radios-tickle.md new file mode 100644 index 0000000..a9ac39e --- /dev/null +++ b/.changeset/silver-radios-tickle.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +- Fix timeout and interval effect cleanup when interval changes diff --git a/.changeset/slick-carrots-stick.md b/.changeset/slick-carrots-stick.md new file mode 100644 index 0000000..506615f --- /dev/null +++ b/.changeset/slick-carrots-stick.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +Update target build to esnext in builder diff --git a/.changeset/spotty-jeans-carry.md b/.changeset/spotty-jeans-carry.md new file mode 100644 index 0000000..7ed304b --- /dev/null +++ b/.changeset/spotty-jeans-carry.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +- Fix missing export for `useMultipleIntersectionObserver` hook diff --git a/.changeset/stale-radios-rule.md b/.changeset/stale-radios-rule.md new file mode 100644 index 0000000..a34b42d --- /dev/null +++ b/.changeset/stale-radios-rule.md @@ -0,0 +1,6 @@ +--- +'classic-react-hooks': patch +--- + +Docs: Start overhauling to new documentation +- Create new docs for `use-event-listener` and `use-intersection-observer` hooks diff --git a/.changeset/tender-sites-occur.md b/.changeset/tender-sites-occur.md new file mode 100644 index 0000000..b42eec7 --- /dev/null +++ b/.changeset/tender-sites-occur.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +Docs - add usage example in js-doc for all of the hooks diff --git a/.changeset/thirty-foxes-wink.md b/.changeset/thirty-foxes-wink.md new file mode 100644 index 0000000..7fef3ed --- /dev/null +++ b/.changeset/thirty-foxes-wink.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +- Introduce second method `setElementRef` function for observing target with `ref` attribute (i.e. ref={setElementRef}) diff --git a/.changeset/twenty-pans-search.md b/.changeset/twenty-pans-search.md new file mode 100644 index 0000000..e6cde0f --- /dev/null +++ b/.changeset/twenty-pans-search.md @@ -0,0 +1,17 @@ +--- +'classic-react-hooks': minor +--- + +## Doc Fixes +- docs: fix imports in js-doc examples +- types: Update type definitions to common types folder +- docs: update docs for hooks + +## Test Updates +- test: refactor and add new the test cases + +## Bug Fixes +- fix: network state update on online/offline event when polling is off(7c765e984556b8496667dd057ca20bc6586e82b6) +- fix: create seperate setElementRef for target setting in use-outside-click(ff812ca88e527c12b3604fb559c1b3d6b87ca7d9) +- fix: making capture flag to false for use-outside-click(fd31ba46b569ed298de6c7a445204beea2c57284) +- fix: lazily set target for outside and use-event-listener(1a387a1fe05dc8a736a629d8a66d067a3162340e) diff --git a/.changeset/violet-cherries-applaud.md b/.changeset/violet-cherries-applaud.md new file mode 100644 index 0000000..4dc67d5 --- /dev/null +++ b/.changeset/violet-cherries-applaud.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': patch +--- + +Update docs for copy-to-clipboard and deboucned-fn hook diff --git a/.changeset/warm-olives-punch.md b/.changeset/warm-olives-punch.md new file mode 100644 index 0000000..4cd50cb --- /dev/null +++ b/.changeset/warm-olives-punch.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +docs: revamp to new doc version for `use-multi-intersection-observer` diff --git a/.changeset/wet-states-wink.md b/.changeset/wet-states-wink.md new file mode 100644 index 0000000..1ec1aa7 --- /dev/null +++ b/.changeset/wet-states-wink.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +Feature: Add AbortSignal api support for use-debounced-fn hook for cancelling the async work diff --git a/.changeset/yellow-nails-worry.md b/.changeset/yellow-nails-worry.md new file mode 100644 index 0000000..e966bef --- /dev/null +++ b/.changeset/yellow-nails-worry.md @@ -0,0 +1,5 @@ +--- +'classic-react-hooks': minor +--- + +feat: add `encoder` and `decoder` props in useLocalStorage for encoding/decoding value in localStorage diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..4ad820f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,11 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_style = space +indent_size = 3 +tab_width = 3 +max_line_length = 120 +trim_trailing_whitespace = true +insert_final_newline = true \ No newline at end of file diff --git a/.github/workflows/canary-publish.yml b/.github/workflows/canary-publish.yml new file mode 100644 index 0000000..232da07 --- /dev/null +++ b/.github/workflows/canary-publish.yml @@ -0,0 +1,32 @@ +name: Publish +on: + push: + branches: + - canary + +concurrency: ${{ github.workflow }}-${{ github.ref }} + +jobs: + canary: + runs-on: 'ubuntu-latest' + permissions: write-all + steps: + - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v4 + # with: + # version: 8 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node }} + cache: 'pnpm' + + - run: pnpm install --no-frozen-lockfile + + - name: Create Canary Release Pull Request or Canary Publish + id: changesets + uses: changesets/action@v1 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + with: + publish: pnpm release diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 5730f80..81a61de 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -3,6 +3,7 @@ on: pull_request: branches: - 'main' + - 'canary' jobs: build: diff --git a/.gitignore b/.gitignore index f8c4d87..0d893a7 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,8 @@ apps/* apps/doc/.vitepress/cache -src/**/*.dev.tsx \ No newline at end of file +/**/*.dev.tsx +/**/*.dev.ts +/**/*.dev.jsx +/**/*.dev.js +/**/*.dev.md diff --git a/.nvmrc b/.nvmrc index e06fc80..fc37597 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18.14.2 \ No newline at end of file +22.17.0 diff --git a/.prettierignore b/.prettierignore index 71c4766..306851e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,4 +4,6 @@ node_modules public apps/doc/.vitepress/cache apps/example -.changeset \ No newline at end of file +.changeset + +pnpm-lock.yaml diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d89d03..5f3329f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,223 @@ # classic-react-hooks +## 2.0.0-canary.27 + +### Minor Changes + +- 8a2a4b7: Feature: Add AbortSignal api support for use-debounced-fn hook for cancelling the async work + +## 2.0.0-canary.26 + +### Minor Changes + +- 4fc9b6c: feat: add `encoder` and `decoder` props in useLocalStorage for encoding/decoding value in localStorage + +## 2.0.0-canary.25 + +### Minor Changes + +- 2358a55: New api and props for use-debounced-fn + - Introduce cleanup and debouncedFn return value + - Introduce immediateCallback, onSuccess, onError and onFinally callback as lifecycle functions + +## 2.0.0-canary.24 + +### Patch Changes + +- ab12cc5: build: upgrade from tsup to tsdown bundler + +## 2.0.0-canary.23 + +### Minor Changes + +- a0c4e96: ref: Initialize context lazily within ContextProvider component for can-reach-to-internet-context + +## 2.0.0-canary.22 + +### Minor Changes + +- 5e43e42: Update target build to esnext in builder + +## 2.0.0-canary.21 + +### Minor Changes + +- f5197b4: ## Doc Fixes + + - docs: fix imports in js-doc examples + - types: Update type definitions to common types folder + - docs: update docs for hooks + + ## Test Updates + + - test: refactor and add new the test cases + + ## Bug Fixes + + - fix: network state update on online/offline event when polling is off(7c765e984556b8496667dd057ca20bc6586e82b6) + - fix: create seperate setElementRef for target setting in use-outside-click(ff812ca88e527c12b3604fb559c1b3d6b87ca7d9) + - fix: making capture flag to false for use-outside-click(fd31ba46b569ed298de6c7a445204beea2c57284) + - fix: lazily set target for outside and use-event-listener(1a387a1fe05dc8a736a629d8a66d067a3162340e) + +## 2.0.0-canary.20 + +### Patch Changes + +- f8af3e3: - Update dependencies, pnpm and node version for better security and performance + +## 2.0.0-canary.19 + +### Minor Changes + +- c534ff5: - Introduce second method `setElementRef` function for observing target with `ref` attribute (i.e. ref={setElementRef}) + +## 2.0.0-canary.18 + +### Minor Changes + +- 8305b6d: - Fix missing export for `useMultipleIntersectionObserver` hook + +## 2.0.0-canary.17 + +### Minor Changes + +- 0d1ac96: - Fix timeout and interval effect cleanup when interval changes + +## 2.0.0-canary.16 + +### Minor Changes + +- 87b8bbb: Feature: + - Add cross-tab sync and ssr support and function based initial value support for `useLocalStorage` hook. + +## 2.0.0-canary.15 + +### Minor Changes + +- fb26e91: ## Fixes following issues + + - Fix: use-can-reach-to-internet `subscribe` handler for `useSyncExternalStore`. It was adding events instead of removing. + - Fix: Prevent from re-triggering the call of `checkIfCanReachToInternet` function in useEffect when `isNetworkPollingEnabled` is disabled. + + ## Test cases + + - Wrote test cases for use-can-reach-to-internet and use-copy-to-clipboard hook. Previously not written. + +## 2.0.0-canary.14 + +### Minor Changes + +- a2f9744: ## Major Rewrite for the Documentation + - home page and overview + - use-can-reach-to-internet + - use-copy-to-clipboard + - use-counter + - use-debounced-fn + - use-event-listener + - use-intersection-observer + - use-multi-intersection-observer + - use-interval-effect + - use-on-mount-effect + - use-outside-effect + - use-synced-effect + - use-synced-ref + - use-throttled-fn + - use-timeout-effect + - use-window-resize + +## 2.0.0-canary.13 + +### Minor Changes + +- ff4615c: docs: revamp to new doc version for `use-multi-intersection-observer` + +## 2.0.0-canary.12 + +### Patch Changes + +- 5877980: Docs: Start overhauling to new documentation + - Create new docs for `use-event-listener` and `use-intersection-observer` hooks + +## 2.0.0-canary.11 + +### Minor Changes + +- 4f5bb6c: - breaking: use the implementation and working for `useIntersection` observer hook. + - feat: introduce new hook `useMultiIntersectionObserver` hook. + +## 2.0.0-canary.10 + +### Patch Changes + +- 5807a38: Add canary branch in CI release + +## 2.0.0-canary.9 + +### Minor Changes + +- e73af53: Feat: Introduce `layoutEffect` boolean prop in use-event-listener hook to pickup `useEffect` between `useLayoutEffect`. By default `useEffect` hook will be used. + Feat: Using layoutEffect for use-window-resize hook. + +## 2.0.0-canary.8 + +### Patch Changes + +- 56478c2: Docs: Update features and overview section + +## 2.0.0-canary.7 + +### Patch Changes + +- cc71e9c: Update docs for copy-to-clipboard and deboucned-fn hook + +## 2.0.0-canary.6 + +### Patch Changes + +- c20ae22: Include src folder in npm publish + +## 2.0.0-canary.5 + +### Minor Changes + +- 51e96f8: Doc update + +## 2.0.0-canary.4 + +### Minor Changes + +- c52bb9f: Add CanReachToInterernetCtxProvder and useCanReachToInternetCtx component's documentation + +## 2.0.0-canary.3 + +### Minor Changes + +- 3e110b2: - Doc: Add `what problem it solves` doc for useCanReachToInternet + - Doc: Refactor the docs for hooks + +## 2.0.0-canary.2 + +### Minor Changes + +- 703c876: - breaking: remove useIsOnline hook + - Feat: add useCanReachToInternet for getting network connection + - Feat: add useCanReachToInternetCtx and CanReachToInternetCtxProvider for subscribing the application to get network reachability with context + +## 2.0.0-canary.1 + +### Minor Changes + +- 44ce4b9: Docs - add usage example in js-doc for all of the hooks + +## 2.0.0-canary.0 + +### Major Changes + +Breaking + +- v2 release prepare +- Rewrite all of the hooks and their documenation + ## 1.4.0 ### Minor Changes diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7580c6e..689aa42 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,28 +2,52 @@ Hi! We are really excited that you are interested in contributing to classic-react-hooks. Before submitting your contribution, please make sure to take a moment and read through the following guide: -## Repo Setup -The package manager used to install and link dependencies should be [pnpm](https://pnpm.io/) v8.12.0 or higher. NodeJS version should be v18.14.2 or higher +## 🔧 System Requirements +- [Node.js](https://nodejs.org/en) v16 or higher +- [Pnpm](https://pnpm.io/) v8 or higher -1. Run `pnpm install` in root folder -2. Run `pnpm run build` to build the package +---- +## 🏗️ Repo Setup -3. Run `pnpm run test` to run the test cases +```bash +git clone https://github.com/Ashish-simpleCoder/classic-react-hooks.git -4. Run `pnpm run format` to format all of the coding with prettier +cd classic-react-hooks +``` -## Pull Request Guidelines + +### Install dependencies +```sh +pnpm install +``` + +### Build project +```sh +pnpm build +``` +### Run tests +```sh +pnpm test +``` +### Format code +```sh +pnpm format +``` + + +---- +## 🔃 Pull Request Guidelines - Checkout a topic branch from a base branch, e.g. `main`, and merge back against that branch. - If adding a new feature: - - Add accompanying test case. - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it. + - Add accompanying test case. -- If fixing bug: +- If fixing a bug: - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `fix: update fetch logic (fix #3899)`. - Provide a detailed description of the bug in the PR. Live demo preferred. @@ -35,9 +59,13 @@ The package manager used to install and link dependencies should be [pnpm](https - Use `pnpm format` to format files according to the project guidelines. -## Documenation Guidelines -- To contribute in the documentation, go to apps/doc directory +--- +## 📄 Documenation Guidelines + +To contribute in the documentation, go to `apps/doc` directory + +### Steps to contribute 1. Run `pnpm install` to install all of the dependencies diff --git a/LICENSE b/LICENSE index e01b318..50d96b4 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2022 Ashish Prajapati +Copyright (c) 2022-Present Ashish Prajapati 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: diff --git a/README.md b/README.md index 537715b..d1e0e09 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # 🚀 classic-react-hooks -#### An awesome collection of `feature packed custom hooks`. -
+Performant · Minimal · Lightweight collection of everyday hooks
+

npm version @@ -18,59 +18,64 @@

+
+ ## Read the Documentation https://classic-react-hooks.vercel.app/ -## Features +## ✨ Features -- Comes with treeshaking -- Typescript support -- Small bundle size -- Minimal and Easy to use +- A carefully curated set of feature-rich, general-purpose hooks +- High performance with a minimal and lightweight footprint +- Predictable, intuitive APIs designed for natural usage +- Strong TypeScript support with an emphasis on type safety +- Zero third-party dependencies +- Modular and declarative design principles +- Fully tree-shakable for optimal bundling +- Comprehensive, well-structured documentation -## Installation +## 🛠️ Tech Stack +- React 18 with TypeScript +- Vitepress for documentation +- Changeset for sementic version releases +- Vitest & React-Testing-Library for testing +- tsdown for build tooling -For npm users -```bash +## 🚀 Install in your project + +For npm users +```bash [npm] $ npm install classic-react-hooks ``` For pnpm users +```bash [pnpm] +$ pnpm add classic-react-hooks +``` -```bash -$ pnpm install classic-react-hooks +For deno users +```bash [deno] +$ deno install classic-react-hooks ``` For yarn users - -```bash +```bash [yarn] $ yarn add classic-react-hooks ``` For bun users - -```bash +```bash [bun] $ bun add classic-react-hooks ``` -## Hooks -- use-event-listener -- use-copy-to-clipboard -- use-local-storage -- use-outside-click -- use-debounced-fn -- use-throttled-hook -- use-is-online -- use-timeout-effect -- use-interval-effect -- use-synced-ref -- use-synced-effect -- use-on-mount-effect -- use-counter - -## Contribution +## 📝 Contribution See [Contributing Guide](https://github.com/Ashish-simpleCoder/classic-react-hooks/blob/main/CONTRIBUTING.md). + + +## 📄 License +- This project is licensed under the MIT License - see the LICENSE file for details. +Copyright (c) 2022-present, Ashish Prajapati diff --git a/apps/doc/.vitepress/config.mts b/apps/doc/.vitepress/config.mts index ae0a2f4..53c085b 100644 --- a/apps/doc/.vitepress/config.mts +++ b/apps/doc/.vitepress/config.mts @@ -1,5 +1,6 @@ import { defineConfig, type DefaultTheme } from 'vitepress' import { version } from '../../../package.json' +import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons' // https://vitepress.dev/reference/site-config export default defineConfig({ @@ -10,6 +11,17 @@ export default defineConfig({ lastUpdated: true, cleanUrls: false, + markdown: { + lineNumbers: true, + config(md) { + md.use(groupIconMdPlugin) + }, + }, + + vite: { + plugins: [groupIconVitePlugin()], + }, + sitemap: { hostname: 'https://classic-react-hooks.vercel.app', transformItems(items) { @@ -32,7 +44,28 @@ export default defineConfig({ }, { text: `v${version}`, - link: `https://github.com/Ashish-simpleCoder/classic-react-hooks/releases/tag/v${version}`, + items: [ + { + items: [ + { + text: `v${version}`, + link: `https://github.com/Ashish-simpleCoder/classic-react-hooks/releases/tag/v${version}`, + }, + ], + }, + { + items: [ + { + text: 'Unreleased', + link: `https://canary-classic-react-hooks.vercel.app/`, + }, + { + text: 'v1.x', + link: `https://v1-classic-react-hooks.vercel.app`, + }, + ], + }, + ], }, ], @@ -52,9 +85,10 @@ export default defineConfig({ icon: 'github', link: 'https://github.com/Ashish-simpleCoder/classic-react-hooks', }, - { icon: 'x', link: 'https://twitter.com/ashish_devloper' }, { icon: 'linkedin', link: 'https://linkedin.com/in/ashish-prajapati-002154193' }, + { icon: 'bluesky', link: 'https://bsky.app/profile/ashish-simplecoder.bsky.social' }, { icon: 'npm', link: 'https://www.npmjs.com/package/classic-react-hooks' }, + { icon: 'x', link: 'https://twitter.com/ashish_devloper' }, ], editLink: { pattern: 'https://github.com/Ashish-simpleCoder/classic-react-hooks/edit/main/apps/doc/:path', @@ -86,13 +120,14 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { items: [ { text: 'use-event-listener', link: 'use-event-listener' }, { text: 'use-intersection-observer', link: 'use-intersection-observer' }, + { text: 'use-multi-intersection-observer', link: 'use-multi-intersection-observer' }, { text: 'use-window-resize', link: 'use-window-resize' }, { text: 'use-copy-to-clipboard', link: 'use-copy-to-clipboard' }, { text: 'use-local-storage', link: 'use-local-storage' }, { text: 'use-outside-click', link: 'use-outside-click' }, { text: 'use-debounced-fn', link: 'use-debounced-fn' }, { text: 'use-throttled-fn', link: 'use-throttled-fn' }, - { text: 'use-is-online', link: 'use-is-online' }, + { text: 'use-can-reach-to-internet', link: 'use-can-reach-to-internet' ,collapsed: true}, { text: 'use-timeout-effect', link: 'use-timeout-effect' }, { text: 'use-interval-effect', link: 'use-interval-effect' }, { text: 'use-synced-ref', link: 'use-synced-ref' }, @@ -101,5 +136,13 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { { text: 'use-counter', link: 'use-counter' }, ] }, + { + text: 'Components', + collapsed: false, + base: "/components/", + items: [ + { text: 'Internet Connectivity Context', link: 'CanReachToInternetCtxProvider' }, + ] + }, ] } diff --git a/apps/doc/.vitepress/theme/index.ts b/apps/doc/.vitepress/theme/index.ts index 2323d71..cac02b2 100644 --- a/apps/doc/.vitepress/theme/index.ts +++ b/apps/doc/.vitepress/theme/index.ts @@ -2,6 +2,8 @@ import { h } from 'vue' import type { Theme } from 'vitepress' import DefaultTheme from 'vitepress/theme' + +import 'virtual:group-icons.css' import './style.css' export default { diff --git a/apps/doc/.vitepress/theme/style.css b/apps/doc/.vitepress/theme/style.css index 377620f..9f98b07 100644 --- a/apps/doc/.vitepress/theme/style.css +++ b/apps/doc/.vitepress/theme/style.css @@ -8,7 +8,7 @@ * * Each colors have exact same color scale system with 3 levels of solid * colors with different brightness, and 1 soft color. - * + * * - `XXX-1`: The most solid color used mainly for colored text. It must * satisfy the contrast ratio against when used on top of `XXX-soft`. * @@ -128,3 +128,11 @@ .DocSearch { --docsearch-primary-color: var(--vp-c-brand-1) !important; } + +/* Dynamic color for icons in index.md */ +html.dark .icon-color-theme { + fill: #e7e7e7; +} +.icon-color-theme { + fill: currentColor; +} diff --git a/apps/doc/components/CanReachToInternetCtxProvider.md b/apps/doc/components/CanReachToInternetCtxProvider.md new file mode 100644 index 0000000..3eade04 --- /dev/null +++ b/apps/doc/components/CanReachToInternetCtxProvider.md @@ -0,0 +1,90 @@ +--- +outline: deep +--- + +# Internet Connectivity Context + +A React Context provider and hook for sharing internet connectivity status across your component tree without prop drilling. + +Built on top of the [useCanReachToInternet](/hooks/use-can-reach-to-internet.html) hook to provide centralized connectivity monitoring. + +## Features + +- **Centralized connectivity state:** Share connectivity status across your entire app +- **No prop drilling:** Access connectivity data from any component in the tree +- **Same configuration options:** All `useCanReachToInternet` options available at provider level + +## Components & Hooks + +### CanReachToInternetCtxProvider + +A context provider component that wraps your application to provide connectivity status to all child components. + +It takes following props + +| Parameter | Type | Required | Default Value | Description | +| ---------------------- | :-------: | :------: | :----------------: | --------------------------------------------------------------------------- | +| children | ReactNode | ✅ | - | React children components that will have access to the connectivity context | +| enableNetworkPolling | boolean | ❌ | true | Enable automatic network polling to continuously check connectivity | +| networkPollingInterval | number | ❌ | 3000 | Interval in milliseconds between network polls | +| testUrl | string | ❌ | https://dns.google | URL to test internet connectivity against | + +### useCanReachToInternetCtx + +A custom hook to consume the internet connectivity context values. + +Return value(s): + +| Property | Type | Description | +| --------------------------- | ------------- | -------------------------------------------------------------------------------- | +| isOnline | boolean | Browser's native online/offline status from `navigator.onLine` | +| canReachToInternet | boolean | Whether the device can actually reach the internet (verified via HTTP request) | +| isFullyConnected | boolean | Combined status: `true` when both `isOnline` and `canReachToInternet` are `true` | +| isNetworkPollingEnabled | boolean | Current state of automatic network polling | +| isCheckingConnection | boolean | Whether a connectivity check is currently in progress | +| startNetworkPolling | () => void | Function to start automatic network polling | +| stopNetworkPolling | () => void | Function to stop automatic network polling | +| forceCheckNetwork | () => void | Function to manually trigger a connectivity check | +| getCanReachToInternetStatus | () => boolean | Function to get current internet reachability status | + +## Usage Examples + +### Basic App Setup + +```tsx +import { CanReachToInternetCtxProvider } from 'classic-react-hooks' + +function App() { + return ( + +
+ +