All hooks / Page, device, and user

usePreferredLanguages

159 B minified and brotliedSourceMarkdown✓ Works in all modern browsers

The user's preferred languages from the browser, most preferred first (navigator.languages), updated when the user changes them.

Renders serverValue on the server and during hydration, then switches to the browser's list with no hydration mismatch.

Import

import { usePreferredLanguages } from '@vincent.ri/react-tils'
// or only this hook
import { usePreferredLanguages } from '@vincent.ri/react-tils/usePreferredLanguages'

Usage

const [language] = usePreferredLanguages()
const price = new Intl.NumberFormat(language, { style: 'currency', currency: 'EUR' }).format(9.99)

Live demo

When to use it

Picking a default locale, suggesting a translation, or formatting with Intl in the user's language.

When not to

The server must render the right language on the first response; read the Accept-Language header on the server instead, and pass it as serverValue so the client agrees. Don't override a language the user chose explicitly in your app.

API

function usePreferredLanguages(serverValue?: readonly string[]): readonly string[]