feat: Add useMobile hook and breakpoints #173
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #173 +/- ##
=======================================
Coverage 98.78% 98.78%
=======================================
Files 36 37 +1
Lines 905 906 +1
Branches 242 254 +12
=======================================
+ Hits 894 895 +1
Misses 11 11 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| export function safeMatchMedia(element: HTMLElement, query: string) { |
There was a problem hiding this comment.
Moved from src/internal/visual-mode/index.ts so that the new useMobile hook can use it too
| * wouldn't know which one of them to use). | ||
| * Instead, we use the media query here in JS too. | ||
| */ | ||
| return safeMatchMedia(document.body, `(max-width: ${mobileBreakpoint}px)`); |
There was a problem hiding this comment.
Small difference with the existing implementation in components —I am not considering the case where window.matchMedia is falsy —TypeScript told me it is not possible and browser support quite agrees.
If, for any reason, in the very worst case, the call to matchMedia errors out, the error will be caught in safeMatchMedia.
| ['default', -1], | ||
| ]; | ||
|
|
||
| export const mobileBreakpoint = BREAKPOINT_MAPPING.filter(b => b[0] === 'xs')[0][1]; |
There was a problem hiding this comment.
It is also necessary to extract the breakpoints because useMobile needs the mobileBreakpoint.
2 participants
Extract the
useMobilehook and the breakpoints from components into component-toolkit, makingwindow.matchMediamore error-resilient in the way.After this, components will be refactored to use the
useMobilehook and the breakpoints from component-toolkit.Related ticket:
AWSUI-61447By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.