managarten/apps-archived/memoro/apps/mobile/hooks/useResponsive.ts

import { useState, useEffect } from 'react';
import { Dimensions, Platform } from 'react-native';

const BREAKPOINTS = {
	mobile: 640,
	tablet: 768,
	desktop: 1024,
	wide: 1440,
} as const;

export function useResponsive() {
	const [dimensions, setDimensions] = useState(() => {
		const { width, height } = Dimensions.get('window');
		return { width, height };
	});

	useEffect(() => {
		if (Platform.OS !== 'web') return;

		const updateDimensions = () => {
			const { width, height } = Dimensions.get('window');
			setDimensions({ width, height });
		};

		const subscription = Dimensions.addEventListener('change', updateDimensions);
		return () => subscription?.remove();
	}, []);

	const { width } = dimensions;

	return {
		width,
		height: dimensions.height,
		isMobile: width < BREAKPOINTS.tablet,
		isTablet: width >= BREAKPOINTS.tablet && width < BREAKPOINTS.desktop,
		isDesktop: width >= BREAKPOINTS.desktop,
		isWide: width >= BREAKPOINTS.wide,
		breakpoint:
			width < BREAKPOINTS.tablet
				? 'mobile'
				: width < BREAKPOINTS.desktop
					? 'tablet'
					: width < BREAKPOINTS.wide
						? 'desktop'
						: 'wide',
	};
}