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