adobe / adobe/react-spectrum

useLocalizedStringFormatter not working with variables

Open
#6,163 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 5h
Merged PRs (30d)
58

Description

### Provide a general summary of the issue here

Variables are not being replaced in translated strings

### 🤔 Expected Behavior?

```js
export const messages = {
en: { greeting: "Hello, {name} !" },
"en-Gb": { greeting: "Hello, {name} !" },
es: { greeting: "Hola, {name} !" },
fi: { greeting: "Hei, {name} !" },
fr: { greeting: "Bonjour, {name} !" },
"fr-CA": { greeting: "Bonjour {name} !" },
de: { greeting: "Hallo, {name} !" },
it: { greeting: "Ciao, {name} !" },
cs: { greeting: "Ahoj, {name} !" },
cy: { greeting: "Helo, {name} !" },
da: { greeting: "Hej, {name} !" },
el: { greeting: "Γεια σου, {name} !" },
he: { greeting: "שלום, {name} !" },
hr: { greeting: "Bok, {name} !" },
id: { greeting: "Halo, {name} !" },
ja: { greeting: "こんにちは、{name} さん!" },
ko: { greeting: "안녕하세요, {name} !" },
ms: { greeting: "Hai, {name} !" },
nl: { greeting: "Hallo, {name} !" },
nb: { greeting: "Hei, {name} !" },
pl: { greeting: "Cześć, {name} !" },
pt: { greeting: "Olá, {name} !" },
"pt-PT": { greeting: "Olá, {name} !" },
ru: { greeting: "Привет, {name} !" },
sk: { greeting: "Ahoj, {name} !" },
sl: { greeting: "Zdravo, {name} !" },
sv: { greeting: "Hej, {name} !" },
th: { greeting: "สวัสดี, {name} !" },
tr: { greeting: "Merhaba, {name} !" },
uk: { greeting: "Привіт, {name} !" },
"zn-Hans": { greeting: "你好,{name} !" },
"zn-Hant": { greeting: "你好,{name} !" },
};

const stringFormatter = useLocalizedStringFormatter(messages);

stringFormatter.format("greeting", { name: "John" }) // "Hello John !"
```

### 😯 Current Behavior

The above code prints `Hello {name} !`

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/bitter-resonance-3783tv?file=%2Fsrc%2FApp.js%3A56%2C24-56%2C30

### Version

3.32.1

### What browsers are you seeing the problem on?

Chrome

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

PSPDFKit

Contributor guide

Open the contributing guide

Research direction

Start with the CodeSandbox reproduction and the useLocalizedStringFormatter entry point, then trace how the greeting message and variables are formatted. Confirm the behavior against the reported example and make sure stringFormatter.format("greeting", {name: "John"}) replaces {name} in the output.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, internationalization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.