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

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

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