Language Suggestion Banner React component
Offers a page in the visitor's own language, written in that language, with a picker for the others. It remembers the answer and only appears when it helps.
About the Language Suggestion Banner component
Language Suggestion Banner helps visitors who landed on the wrong language, without redirecting them against their will. It speaks to them in their own language and offers to switch.
It only appears when the browser's language differs from the page and you support it, and it remembers the answer, so nobody is asked twice.
When to use it
Use it on multilingual sites, instead of forcing a redirect based on the browser or location.
For a single-language site it stays hidden, so it does no harm to leave it out.
Installation
Add the Language Suggestion Banner component to your project with the shadcn CLI. It lands in components/language-suggestion-banner.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/language-suggestion-bannerProps
<LanguageSuggestionBanner /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| languages Languages the site is available in. | { code: string; name: string; message: string; action: string; stay: string; href?: string }[] | LANGUAGES |
| current The language of the page people are on. | string | "en" |
| detected Force a language instead of reading the browser. | string | — |
| storageKey Key used to remember the answer. | string | "language-suggestion" |
| onSwitch Called with the language people picked. | (language: LanguageOption) => void | — |
| onDismiss | () => void | — |
- theme"dark" | "light"Default: "dark"
- languages
Languages the site is available in.
{ code: string; name: string; message: string; action: string; stay: string; href?: string }[]Default: LANGUAGES - current
The language of the page people are on.
stringDefault: "en" - detected
Force a language instead of reading the browser.
string - storageKey
Key used to remember the answer.
stringDefault: "language-suggestion" - onSwitch
Called with the language people picked.
(language: LanguageOption) => void - onDismiss() => void
Language Suggestion Banner FAQ
- How does it choose the language?
- From navigator.language. Pass detected to force one, for testing.
- Does it redirect people?
- Only if they press the button. Give a language an href, or handle onSwitch yourself.
- Why is the message in the other language?
- Because it is written for someone who may not read the page they landed on.
- Are screen readers told the language?
- Yes. The bar sets the lang attribute of the language it is offering.
