Skip to content

Instantly share code, notes, and snippets.

@KajSzy
Last active January 11, 2021 07:52
Show Gist options
  • Select an option

  • Save KajSzy/564e25e384074918d873ef7602b2a094 to your computer and use it in GitHub Desktop.

Select an option

Save KajSzy/564e25e384074918d873ef7602b2a094 to your computer and use it in GitHub Desktop.
Example of using Template Literal Types introduced in Typescript 4.1
import { useMediaQuery, useTheme } from '@material-ui/core';
type Devices = 'mobile' | 'tablet' | 'desktop';
type DeviceKey = `is${Capitalize<Devices>}`;
export const useBreakpoints = (): Record<DeviceKey, boolean> => {
const theme = useTheme();
return {
isMobile: useMediaQuery(theme.breakpoints.down('sm')),
isTablet: useMediaQuery(theme.breakpoints.between('sm', 'md')),
isDesktop: useMediaQuery(theme.breakpoints.up('md')),
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment