Files
bsky-social-app/src/view/com/util/layouts/withBreakpoints.tsx
T
dan a5b89dffa6 Add ESLint React plugin (#1412)
* Add eslint-plugin-react

* Enable display name rule
2023-09-07 16:38:57 -07:00

21 lines
589 B
TypeScript

import React from 'react'
import {isNative} from 'platform/detection'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
export const withBreakpoints = <P extends object>(
Mobile: React.ComponentType<P>,
Tablet: React.ComponentType<P>,
Desktop: React.ComponentType<P>,
): React.FC<P> =>
function WithBreakpoints(props: P) {
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
if (isMobile || isNative) {
return <Mobile {...props} />
}
if (isTabletOrMobile) {
return <Tablet {...props} />
}
return <Desktop {...props} />
}