',
optional: true,
default: 'undefined',
},
}}
/>
### Descrizione
| Prop | Descrizione |
| ----------- | -------------------------------------------------------------------------------------------------------- |
| `variables` | Un oggetto in cui le chiavi indicano a quale parte della voce del dizionario corrisponde ciascun valore. |
***
## Esempi
### Passare variabili
Per passare una variabile a una voce del dizionario, dobbiamo fare due cose: (1) aggiungere una variabile alla voce e (2) fare riferimento a tale variabile nella chiamata di [`d`](/docs/react/api/dictionary/use-translations).
Per prima cosa, aggiungiamo una variabile alla voce del dizionario con la seguente sintassi: `{username}`.
`username` è il nome della variabile.
```jsx title="dictionary.ts"
// [!code word:username]
const dictionary = {
greeting: {
hello: 'Hello, {username}!',
},
};
export default dictionary;
```
Quindi facciamo riferimento alla variabile:
```jsx title="Component.tsx"
// [!code word:username]
import { useTranslations } from 'gt-react';
const Component = () => {
const t = useTranslations();
return {t('greeting.hello', { username : 'Brian123' })}
;
};
```
### Uso del formato dei messaggi ICU
`gt-react` supporta il formato dei messaggi ICU, che consente anche di formattare le variabili.
```jsx title="dictionary.ts"
// [!code word:account-balance]
const dictionary = {
account: {
balance: 'Il saldo del tuo conto: {dollars, number, ::currency/USD}!',
},
};
export default dictionary;
```
Successivamente, facciamo riferimento alla variabile:
```jsx title="Component.tsx"
// [!code word:account-balance]
import { useTranslations } from 'gt-react';
const Component = () => {
const t = useTranslations();
return
{ t(
'account.balance',
{
"dollars" : 1000000,
}
) }
;
};
```
***
## Note
* L'oggetto `variables` passa i valori a una voce del dizionario.
* L'oggetto `variablesOptions` definisce il comportamento delle variabili.
## Passaggi successivi
* Consulta [dizionari](/docs/react/guides/dictionaries) per ulteriori informazioni sui dizionari e sulle pratiche più comuni.
* Consulta [`useTranslations`](/docs/react/api/dictionary/use-translations) per ulteriori informazioni sull'interfaccia dei dizionari.
* Consulta [`formato dei messaggi ICU`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) per ulteriori informazioni sulle opzioni di formattazione.