useNavigatorLanguage

About

Navigator Language hook for React.

Examples

import { useNavigatorLanguage } from "rooks";

function App() {
  const language = useNavigatorLanguage();

  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>Rooks : useNavigatorLanguage example</h1>
      <p style={{ fontSize: "20px" }}>
        Language is <b>{language}</b>
      </p>
    </div>
  );
}

export default App;

Return value

Returns the browser's preferred BCP 47 language tag as string, or null during server rendering.

Parameters

This hook takes no parameters.

Behavior and lifecycle

The hook reads navigator.language, updates after window.languagechange, and removes that listener on cleanup. It does not expose the full navigator.languages preference list.

Compatibility and accessibility

SSR returns null; use a deterministic default so translated text does not cause a hydration mismatch. Language preference is a hint, not a guarantee of literacy or locale, and should not silently override an explicit user choice.

Related

• Browse all hooks