Feature: Added useOrientation custom hook.

[francoisdillinger]

Pull Request Description

Description A hook that tracks the device's orientation and provides updates when it changes.

Acceptance Criteria

• [x] Orientation Tracking: Provides the current device orientation (e.g., portrait or landscape).
• [x] Event Updates: Triggers updates when the device orientation changes.
• [x] Cleanup: Removes event listeners when the component is unmounted.

Details:

• The useOrientation hook returns the current device orientation (portrait or landscape).
• The values update dynamically when the device orientation changes.
• The orientation event listener is properly cleaned up when the component is unmounted.
• Updated the index.ts file to export the useOrientation hook.
• Updated the docs/README with a description of the new hook.

Demo:

Here is a gif demonstrating the hook in action:

Code Changes

Hook Implementation:

import { useState, useEffect } from "react";

type Orientation = {
  orientation: "portrait" | "landscape";
};

export const useOrientation = () => {
  const [orientation, setOrientation] = useState<Orientation>({
    orientation: window.matchMedia("(orientation: portrait)").matches
      ? "portrait"
      : "landscape",
  });

  useEffect(() => {
    const handleOrientationChange = (e: MediaQueryListEvent) => {
      setOrientation({
        orientation: e.matches ? "portrait" : "landscape",
      });
    };

    const portraitMediaQuery = window.matchMedia("(orientation: portrait)");
    portraitMediaQuery.addEventListener("change", handleOrientationChange);

    return () =>
      portraitMediaQuery.removeEventListener("change", handleOrientationChange);
  }, []);

  return orientation;
};

Index File Update:

export { useOrientation } from './hooks/useOrientation';
// ...other exports

Documentation Update: Added a description of the useOrientation hook to the docs/README file.

- [`useOrientation()`](https://reacthaiku.dev/docs/hooks/useOrientation) - Detect when device is in portrait or landscape mode.