open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use useIsMobile hook in AmountInput

Browse Source
This commit is contained in:
Marshall Polaris 2022-09-24 16:35:24 -07:00
parent 2be2c07df5
commit 798e9cfd29
2 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/amount-input.tsx
View File

@ -5,7 +5,7 @@ import { formatMoney } from 'common/util/format'
import { Col } from './layout/col'
import { SiteLink } from './site-link'
import { ENV_CONFIG } from 'common/envs/constants'
import { useWindowSize } from 'web/hooks/use-window-size'
import { useIsMobile } from 'web/hooks/use-is-mobile'
export function AmountInput(props: {
amount: number | undefined
@ -34,8 +34,7 @@ export function AmountInput(props: {
const isInvalid = !str || isNaN(amount)
onChange(isInvalid ? undefined : amount)
}
const { width } = useWindowSize()
const isMobile = (width ?? 0) < 768
const isMobile = useIsMobile(768)
return (
<Col className={className}>
<label className="input-group mb-4">

8
web/hooks/use-is-mobile.ts
View File

@ -1,13 +1,13 @@
import { useEffect, useState } from 'react'
export function useIsMobile() {
export function useIsMobile(threshold?: number) {
const [isMobile, setIsMobile] = useState<boolean>()
useEffect(() => {
// matches tailwind sm breakpoint
const onResize = () => setIsMobile(window.innerWidth < 640)
// 640 matches tailwind sm breakpoint
const onResize = () => setIsMobile(window.innerWidth < (threshold ?? 640))
onResize()
window.addEventListener('resize', onResize)
return () => window.removeEventListener('resize', onResize)
}, [])
}, [threshold])
return isMobile
}