status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

update use-current-breakpoint hook

This commit is contained in:
Pavel Prichodko 2023-06-27 09:46:10 +01:00
parent 1f2a2b9d85
commit 92f7dd20c3
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/website/src/hooks/use-current-breakpoint.ts
View File

@ -8,15 +8,18 @@ import defaultTheme from 'tailwindcss/defaultTheme'
// const fullConfig = resolveConfig(tailwindConfig)
export function useCurrentBreakpoint() {
const [currentBreakpoint, setCurrentBreakpoint] = useState('')
type Breakpoint = keyof (typeof defaultTheme)['screens']
export function useCurrentBreakpoint(): Breakpoint {
const [breakpoint, setBreakpoint] = useState<Breakpoint>('sm')
useEffect(() => {
const handleResize = () => {
const screenWidth = window.innerWidth
const breakpoints = defaultTheme.screens
? Object.entries(defaultTheme.screens)
: []
const breakpoints = Object.entries(defaultTheme.screens) as [
Breakpoint,
string
][]
for (let i = breakpoints.length - 1; i >= 0; i--) {
const [breakpoint, minWidth] = breakpoints[i]
@ -24,8 +27,8 @@ export function useCurrentBreakpoint() {
const convertedMinWidth = parseInt(minWidth, 10)
if (screenWidth >= convertedMinWidth) {
setCurrentBreakpoint(breakpoint)
break
setBreakpoint(breakpoint)
return
}
}
}
@ -39,5 +42,5 @@ export function useCurrentBreakpoint() {
}
}, [])
return currentBreakpoint || 'sm' // Default breakpoint if none matches or during SSR
return breakpoint
}