First draft useScreenOrientation

src/hooks/useMediaQuery/useMediaQuery.mdx

@@ -9,7 +9,7 @@ Hook that returns true when the media query matches.
 ## Reference
 
 ```ts
-function useMediaQuery(mediaQueryOrVariableName: string, defaultValue = false): boolean;
+function useMediaQuery(mediaQueryOrVariableName: string, defaultValue?: boolean): boolean;
 ```
 
 ## Usage

src/hooks/useMediaQuery/useMediaQuery.ts

@@ -53,8 +53,8 @@ export function getMediaQueryList(
  */
 export function useMediaQuery(
   mediaQueryOrVariableName: MediaQueryValues,
-  defaultValue = false,
-): boolean {
+  defaultValue?: boolean,
+): boolean | undefined {
   const [mediaQueryList, setMediaQueryList] = useState<MediaQueryList | undefined>(() =>
     getMediaQueryList(mediaQueryOrVariableName),
   );

src/hooks/useScreenOrientation/useScreenOrientation.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Hooks / useScreenOrientation" />
+
+# useScreenOrientation
+
+`useScreenOrientation` is a custom React hook for handling screen orientation changes. It listens
+for window resizing events, determining the screen's current orientation (portrait or landscape).
+This hook is useful for building UIs that adapt based on device orientation, enhancing user
+experience across various devices.
+
+## Reference
+
+```ts
+function useScreenOrientation(): { isLandscape: boolean; isPortait: boolean };
+```
+
+### Returns
+
+- An object with 2 values: isLandscape and isPortrait, both booleans where the later is the opposite
+  of the first.
+
+## Usage
+
+```tsx
+function DemoComponent() {
+  const { isLandscape } = useScreenOrientation();
+  return <div>Orientation: {isLandscape ? 'Landscape' : 'Portrait'}</div>;
+}
+```

src/hooks/useScreenOrientation/useScreenOrientation.stories.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable react/jsx-no-literals */
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactElement } from 'react';
+import { useScreenOrientation } from './useScreenOrientation.js';
+
+const meta = {
+  title: 'Hooks / useScreenOrientation',
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+function DemoComponent(): ReactElement {
+  const { isLandscape } = useScreenOrientation();
+
+  return (
+    <div>
+      <div className="alert alert-primary">
+        <h4 className="alert-heading">Instructions</h4>
+        <p className="mb-0">Resize the viewport to see the useScreenOrientation hook in action.</p>
+      </div>
+
+      <div>
+        <div>Orientation: {isLandscape ? 'Landscape' : 'Portrait'}</div>
+      </div>
+    </div>
+  );
+}
+
+export const Demo: Story = {
+  render() {
+    return <DemoComponent />;
+  },
+};

src/hooks/useScreenOrientation/useScreenOrientation.ts

@@ -0,0 +1,19 @@
+import { useMediaQuery } from '../useMediaQuery/useMediaQuery.js';
+
+/**
+ * This hook observes the orientation of the of the screen.
+ *
+ * @returns An object with 2 values: isLandscape and isPortrait, both booleans where the later is the opposite of the first.
+ */
+
+export function useScreenOrientation(): {
+  isLandscape: boolean | undefined;
+  isPortrait: boolean | undefined;
+} {
+  const isLandscape = useMediaQuery('(orientation: landscape)');
+
+  return {
+    isLandscape,
+    isPortrait: !isLandscape,
+  };
+}

src/index.ts

@@ -22,6 +22,7 @@ export * from './hooks/useRefs/utils/unwrapRefs/unwrapRefs.js';
 export * from './hooks/useRefs/utils/unwrapRefs/unwrapRefs.types.js';
 export * from './hooks/useRefs/utils/validateAndUnwrapRefs/validateAndUnwrapRefs.js';
 export * from './hooks/useResizeObserver/useResizeObserver.js';
+export * from './hooks/useScreenOrientation/useScreenOrientation.js';
 export * from './hooks/useStaticValue/useStaticValue.js';
 export * from './hooks/useToggle/useToggle.js';
 export * from './lifecycle/components/CrossFlow/CrossFlow.js';