22 lines
640 B
TypeScript
22 lines
640 B
TypeScript
import React from 'react'
|
|
import {useMediaQuery} from 'react-responsive'
|
|
import {isNative} from 'platform/detection'
|
|
|
|
export const withBreakpoints =
|
|
<P extends object>(
|
|
Mobile: React.ComponentType<P>,
|
|
Tablet: React.ComponentType<P>,
|
|
Desktop: React.ComponentType<P>,
|
|
): React.FC<P> =>
|
|
(props: P) => {
|
|
const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
|
|
const isMobile = useMediaQuery({query: '(max-width: 800px)'})
|
|
|
|
if (isMobile || isNative) {
|
|
return <Mobile {...props} />
|
|
}
|
|
if (isTabletOrMobile) {
|
|
return <Tablet {...props} />
|
|
}
|
|
return <Desktop {...props} />
|
|
}
|