usePreferredLanguage
Adapt to user language preferences dynamically with usePreferredLanguage.
Install:
npm i @uidotdev/usehooks
Description:
Basically, what this hook does is that, it takes a parameter with value true or false and toggles that value to opposite. It’s useful when we want to take some action into it’s opposite action, for example: show and hide modal, show more/show less text, open/close side menu.
Return Value
| Name | Type | Description |
|---|---|---|
| preferredLang | string | The hook returns a string that represents the preferred language of the user, as set in the browser settings. |
Demo:
Example:
import * as React from "react";
import { usePreferredLanguage } from "@uidotdev/usehooks";
export default function App() {
const language = usePreferredLanguage();
return (
<section>
<h1>usePreferredLanguage</h1>
<p>Change language here - chrome://settings/languages</p>
<h2>
The correct date format for <pre>{language}</pre> is{" "}
<time>{new Date(Date.now()).toLocaleDateString(language)}</time>
</h2>
</section>
);
}