useLocalizedStringFormatter not working with variables
- 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
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