usePreferredLanguage

Adapt to user language preferences dynamically with usePreferredLanguage.

Install:

npm i @uidotdev/usehooks

Description:

The usePreferredLanguage hook automatically adapts to the preferred language of the user. The hook reactively returns a string that represents the preferred language of the user, as set in the browser settings.

Return Value

NameTypeDescription
languagestringThe 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>
  );
}

More Hooks:

Sort: