How do we use current media breakpoint in the code?

[kachar]

👋

I'm trying to achieve the following - container that is direction: row on desktop and direction: column on mobile

const xs = useMediaQuery('xs')

return (
  <Container direction={xs ? 'column' : 'row'}>
    contents
  </Container>
)

I'm not able to find any documentation on using media queries and hooks together.

Great lib, kudos for the energy

[dartilesm]

I think you need to pass a number instead of string.

nextui/apps/docs/src/hooks/use-media-query.ts

Line 3 in b3ecba6

export const useMediaQuery = (width: number): boolean => {

[kachar]

I never found the hook useMediaQuery to be documented, so I was guessing that there might be such a hook (coming from Mui experience).

Just realized that this hook is not exported member of nextui, but a simple window.matchMedia with hardcoded values, not based on the theme breakpoints.

nextui/apps/docs/src/hooks/use-media-query.ts

Lines 29 to 31 in b3ecba6

	export const useIsMobile = () => {
	return useMediaQuery(650);
	};

Are there plans to have this utility hook included in the package?

[jrgarciadev]

Hey @kachar @dartilesm since NextUI is based on Stitches and has built-in media queries, you can simply add it in this way:

 <Container css={{ 
    flexDirection: 'row',
    '@xsMax': {
      flexDirection: 'column'
    } 
 }}>
     // children ....
</Container>

Note: if you prefer you can also use the shorthand fd instead of flexDirection here more info -> https://nextui.org/docs/theme/utilities#utilities

for further information, you can check out these pages:

1. Stitches breakpoints
2. NextUI Built-in breakpoints
3. Stitches responsive styles

Please try to avoid using the useMediaQuery to apply styles (unless absolutely necessary) due to it won't be included in the SSR styles

I hope this helps 🙌🏻

[kachar]

Thanks for the detailed reply, it was what I needed to learn about nextui principles.