Fix useBreakPoint hook with provider pattern and improve media query handling

[joelpierre]

Summary

This PR refactors the useBreakPoint hook to use a Context Provider pattern, improving error handling and ensuring proper initialization. It also fixes media query event listener management and updates tests accordingly.

Key Changes

• Added BreakpointProvider: Introduced a context provider pattern to wrap the application, ensuring the hook is used within the proper context
• Improved error handling: The hook now throws a descriptive error when used outside the BreakpointProvider
• Fixed media query listeners: Corrected the event listener attachment/removal logic to properly handle both modern (addEventListener/removeEventListener) and legacy (addListener/removeListener) APIs
• Fixed context initialization: Changed BreakPointContext default from defaultBreakPointContext to undefined to properly detect when the hook is used outside the provider
• Optimized re-renders: Added useMemo for media query arrays to prevent unnecessary re-renders
• Enhanced test coverage:
  • Added mock implementation for window.matchMedia
  • Updated all tests to use the BreakpointProvider wrapper
  • Added test case for error when hook is used outside provider
  • Fixed test description typo: useBeakPoint → useBreakPoint

Implementation Details

• The media query listener logic now properly uses if/else statements instead of early returns, ensuring both modern and legacy APIs are handled correctly
• The context is now properly typed as typeof defaultBreakPointContext | undefined to enable runtime validation
• Test setup includes proper mocking of window.matchMedia with all required MediaQueryList methods

https://claude.ai/code/session_01JEENKXTHsiUhVAfvJSAw6n

[github-actions]

size-limit report 📦

Path	Size
dist/index.d.ts, dist/index.es.js	3.85 KB (+0.59% 🔺)

[Copilot]

Pull request overview

This PR refactors the breakpoint hook to use a provider-based context, tightens media query handling for both modern and legacy APIs, and aligns tests/snapshots with the new behavior and error handling.

Changes:

• Updated useMatchMedia to correctly attach and detach listeners using addEventListener/removeEventListener when available, with a proper else fallback to addListener/removeListener.
• Switched BreakPointContext to use undefined as the default and added a runtime error if useBreakPoint is called outside BreakpointProvider; memoized media query arrays to avoid unnecessary re-renders.
• Enhanced tests by mocking window.matchMedia, wrapping hooks with BreakpointProvider, adding an error-path test, and updating snapshots to reflect the new naming and behavior.

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated no comments.

File	Description
src/index.tsx	Refines media query listener setup/cleanup, changes BreakPointContext default to undefined for runtime validation, and memoizes media query arrays before passing them to useMatchMedia.
src/__tests__/index.test.tsx	Adds a matchMedia mock, wraps hooks in BreakpointProvider, and introduces a test asserting that useBreakPoint throws when used outside the provider.
src/__tests__/__snapshots__/index.test.tsx.snap	Updates stored snapshots to match the new test names and the unchanged returned breakpoint structures.
dist/index.es.js	Regenerates the bundled ESM output to reflect the updated hook, context behavior, and memoization logic.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.