Custom React hook for detecting user's device

useDevice.ts

import { useEffect, useState } from "react";

export type TDevice = "mobile" | "desktop";

const useDevice = () => {
  const [device, setDevice] = useState<TDevice>("mobile");

  useEffect(() => {
    const { userAgent } = navigator;
    userAgent.includes("Mobi") ? setDevice("mobile") : setDevice("desktop");
  }, []);

  return device;
};

export default useDevice;