usePreferredLanguage

cURL wget

React hook to get the user's preferred language

Example

Demo Code

import usePreferredLanguage from "@/hooks/usePreferredLanguage";

export default function UsePreferredLanguageExample() {
  const language = usePreferredLanguage();

  return (
    <section>
      <div className="text-ctp-text">
        <p>
          Updates when you{" "}
          <a href="chrome://settings/languages">
            change your preferred language, too.
          </a>
        </p>
        <p>Language: {language}</p>
      </div>
    </section>
  );
}

Code

import { useSyncExternalStore } from "react";

const usePreferredLanguageSubscribe = (callback: (event: Event) => void) => {
  window.addEventListener("languagechange", callback);
  return () => window.removeEventListener("languagechange", callback);
};

const getPreferredLanguageSnapshot = () => {
  return navigator.language;
};

const getPreferredLanguageServerSnapshot = () => {
  throw Error("usePreferredLanguage is a client-only hook");
};

/**
 * React hook to get the user's preferred language
 * @returns {string} The user's preferred language
 */
export default function usePreferredLanguage() {
  return useSyncExternalStore(
    usePreferredLanguageSubscribe,
    getPreferredLanguageSnapshot,
    getPreferredLanguageServerSnapshot,
  );
}