First draft useScreenOrientation

[firstchair]

No description provided.

[ThaNarie]

in what scenario would you want undefined to be returned ?

[leroykorterink]

This could be helpful for SSR, and only on client side return a boolean 🤔

[ThaNarie]

Interesting. I wonder what you would do with this then... not render something at all?
You always get a hydration error then? And this value on the client should only be used after the first render?

[ThaNarie]

These are mutually exclusive, so why not return 'landscape' | 'portrait'?

[leroykorterink]

I don't know if it's helpful to add this as a hook because the only thing it does is provide a default value for the useMediaQuery hook. Instead we could add the landscape media query as a constant to the useMediaQuery hook file and export it and write some additional documentation.

That'll mean that you can get the same behaviour with something like this:

import { useMediaQuery, landscapeOrientationMediaQuery  } from '@mediamonks/react-kit`
const isLandscape = useMediaQuery(landscapeOrientationMediaQuery)

instead of

import { useScreenOrientation } from '@mediamonks/react-kit`
const isLandscape = useScreenOrientation()

Additionally, browsers have a not super well supported ScreenOrientation api that could be a potential naming conflict.

Copilot reviewed 4 out of 6 changed files in this pull request and generated 1 suggestion.

Files not reviewed (2)

• src/hooks/useMediaQuery/useMediaQuery.mdx: Language not supported
• src/hooks/useScreenOrientation/useScreenOrientation.mdx: Language not supported

Comments skipped due to low confidence (2)

src/hooks/useScreenOrientation/useScreenOrientation.ts:17

• Add a test case to cover the scenario where isLandscape is undefined to ensure the behavior is as expected.

isPortrait: !isLandscape,

src/hooks/useMediaQuery/useMediaQuery.ts:57

• The return type of useMediaQuery has been changed to boolean | undefined. This might introduce unintended behavior if the calling code does not handle undefined values. Ensure that all usages of useMediaQuery are updated to handle undefined values appropriately.

): boolean | undefined {