# usePreferredLanguages

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

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

## Usage

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

## 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

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

| Parameter | Description |
| --- | --- |
| `serverValue` | Languages on the server and during hydration. Default `['en']`. Pass the parsed `Accept-Language` header if you have it, as a constant or memoized array. |

## Browser support

Works in all modern browsers.

---

159 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/usePreferredLanguages.ts
Docs page: https://vincentri.github.io/react-tils/hooks/usePreferredLanguages/
Previous: [useIdle](https://vincentri.github.io/react-tils/hooks/useIdle.md)
Next: [usePermission](https://vincentri.github.io/react-tils/hooks/usePermission.md)