useNavigatorLanguage

The useNavigatorLanguage hook is helpful when you want to get a reactive value which denotes the language set by the user in their browser settings.

It returned a string representing the language as defined in RFC:5646 code.

useNavigatorLanguage

Preferred Language is : en-US

Date in preferred language is 6/9/2024Try changing the language settings from here

Usage

Import the hook from @abhushanaj/react-hooks and use in required component;

./src/App.tsx

import { useNavigatorLanguage } from '@abhushanaj/react-hooks';

function App() {
  const preferredLanguage = useNavigatorLanguage('en-US');

  return (
    <div>
      <p>Preferred Language is : {preferredLanguage}</p>
      <small>
        Try changing the language settings from <a href="chrome://settings/languages">here</a>
      </small>
    </div>
  );
}

export default App;

API Reference

Parameters

Parameter	Type	Description	Default
defaultLang	string (optional)	The default language to use on server snapshots while SSR.	en-US

Return Value

Parameter	Type	Description	Default
language	string	Language as defined in RFC:5646.	N/A