Published on

usePreferredLanguage Hook React

usePreferredLanguage Hook React

usePreferredLanguage Hook React

usePreferredLanguage Code and Usage

usePreferredLanguage is a hook to get the users preferred language settings from the browser.

import { useEffect, useState } from "react";

const usePreferredLanguage = () => {
  const [preferredLanguage, setPreferredLanguage] = useState("");

  useEffect(() => {
    const language = window.navigator.language || window.navigator.userLanguage;
    setPreferredLanguage(language);
  }, []);

  return preferredLanguage;
};

// Usage
const PreferredLanguageExample = () => {
  const language = usePreferredLanguage();

  return (
    <div>
      <p>Preferred Language: {language}</p>
    </div>
  );
};

Previous Article