[DX] Implement Custom Network Connection Quality Detection Hook

Open Beginner friendly
  • Is something wrong?
#404 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

  • #409 by @kanaksahu111 — closed without merging

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
next.js, react, typescript
Domain
developer-experience, frontend

Research direction

Add the hook in src/hooks/use-network-quality.ts using navigator.connection when present and falling back to navigator.onLine, returning { isOnline, effectiveType, saveData, isSlowConnection } and updating on connection change plus window online/offline. Mark isSlowConnection true for 2g, slow-2g, or saveData. Cover online/offline and mocked connection types in tests/use-network-quality.test.ts with Vitest; done when the hook matches the stated shape and those tests pass.

Written by the indexing model from the issue text.

Description

community contributions-welcome dx enhancement hacktoberfest hactober-fest help wanted up-for-grabs
🎯 Goal

Implement a custom React hook in src/hooks/use-network-quality.ts to detect connection speed and data saver settings for optimizing background polling and asset loading.

📋 Feature Details & Requirements
  • Hook File: src/hooks/use-network-quality.ts
  • Core Functionality:
    • Monitor navigator.connection (Network Information API) if available, fallback to navigator.onLine.
    • Return state: { isOnline: boolean, effectiveType: '4g' | '3g' | '2g' | 'slow-2g' | 'unknown', saveData: boolean, isSlowConnection: boolean }.
    • Mark isSlowConnection as true if effectiveType is 2g or slow-2g or if saveData is enabled.
    • Listen to connection change events and window online / offline events to update state dynamically.
🧪 Unit Testing Requirements
  • Create unit tests in tests/use-network-quality.test.ts using Vitest.
  • Test hook behavior with online/offline toggles and mock network connection types.
Dominant language
TypeScript
Stars
5
Forks
7
Avg merge
1d 16h
Merged PRs (30d)
79

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TheVicky1/Pact_OS

All issues in TheVicky1/Pact_OS

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.