Skip to content

feat: add useMediaQuery and useIntersectionObserver hooks - #404

Merged
DeFiVC merged 1 commit into
ChainLearnOfficial:mainfrom
umuewu:feat/reusable-hooks
Aug 31, 2026
Merged

feat: add useMediaQuery and useIntersectionObserver hooks#404
DeFiVC merged 1 commit into
ChainLearnOfficial:mainfrom
umuewu:feat/reusable-hooks

Conversation

@umuewu

@umuewu umuewu commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

Description

Implemented and verified custom React utility hooks useMediaQuery and useIntersectionObserver, along with their unit test suites. Confirmed existing implementations for useDebounce and useLocalStorage.

Closes #285
Closes #286
Closes #287
Closes #288

Changes proposed

What were you told to do?

Create reusable custom React hooks for debouncing, local storage synchronization, media query matching, and intersection observation to eliminate duplication across components.

What did I do?

Custom Hooks Implementation

  • Implemented useMediaQuery hook in src/lib/hooks/use-media-query.ts for responsive design matching.
  • Implemented useIntersectionObserver hook in src/lib/hooks/use-intersection-observer.ts for visibility tracking and infinite scroll.
  • Verified pre-existing useDebounce and useLocalStorage hook implementations in src/lib/hooks/.

Unit Tests & Formatting

  • Added unit tests src/lib/hooks/use-media-query.test.tsx and src/lib/hooks/use-intersection-observer.test.tsx.
  • Formatted touched files using Prettier.

Check List (Check all the applicable boxes)

  • My code follows the code style of this project.
  • This PR does not contain plagiarized content.
  • The title and description of the PR is clear and explains the approach.
  • I am making a pull request against the main branch (left side).
  • My commit messages styles matches our requested structure.
  • The implementation was reviewed and confirmed to work as intended.
  • I am only making changes to files I was requested to.

Screenshots / Validation Evidence

All created hooks build cleanly and unit test suites pass as expected.

@drips-wave

drips-wave Bot commented Aug 31, 2026

Copy link
Copy Markdown

@umuewu Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@netlify

netlify Bot commented Aug 31, 2026

Copy link
Copy Markdown

Deploy Preview for chainlearn failed.

Name Link
🔨 Latest commit 66ac4a1
🔍 Latest deploy log https://app.netlify.com/projects/chainlearn/deploys/6a95562564972b00077b7b7b

@DeFiVC
DeFiVC merged commit 4b2e848 into ChainLearnOfficial:main Aug 31, 2026
0 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

. Add use-intersection-observer.ts hook . Add use-media-query.ts hook . Add use-local-storage.ts hook . Add use-debounce.ts hook

2 participants