{t('greeting@@Hi! I am {{name}}', { name: 'Qwik Speak' })}
{/* Hi! I am Qwik Speak */} ); }); ``` You can pass only the default values by enabling the automatic key generation option: ```tsx import { inlineTranslate } from 'qwik-speak'; export default component$(() => { const t = inlineTranslate(); return ( <>{t('Hi! I am {{name}}', { name: 'Qwik Speak' })}
{/* Hi! I am Qwik Speak */} ); }); ``` See [Translate](/qwik-speak/library/translate.md) and [Automatic key generation](/qwik-speak/library/translate.md#automatic-key-generation) for more details. ### Getting dates, relative time & numbers ```tsx import { useFormatDate, useRelativeTime, useFormatNumber } from 'qwik-speak'; export default component$(() => { const fd = useFormatDate(); const rt = useRelativeTime(); const fn = useFormatNumber(); return ( <>{fd(Date.now(), { dateStyle: 'full', timeStyle: 'short' })}
{/* Wednesday, July 20, 2022 at 7:09 AM */}{rt(-1, 'second')}
{/* 1 second ago */}{fn(1000000, { style: 'currency' })}
{/* $1,000,000.00 */} ); }); ``` See [Localize](/qwik-speak/library/translate.md#localize) for more details. ## Static translations Translation are loaded and inlined in chunks sent to the browser during the build. See [Qwik Speak Inline Vite plugin](/qwik-speak/tools/inline.md) for more information on how it works and how to use it. ## Extraction of translations To extract translations directly from the components, a command is available that automatically generates the files with the keys and default values. See [Qwik Speak Extract](/qwik-speak/tools/extract.md) for more information on how to use it. ## Automatic translation To automatically translate files, the following external packages are available: * [GPT Translate JSON](https://github.com/robisim74/gpt-translate-json) * [Qwik Speak DeepL](https://www.npmjs.com/package/@tegonal/qwik-speak-deepl) ## Speak context {% @mermaid/diagram content="stateDiagram-v2 State1: SpeakState State2: SpeakConfig State3: SpeakLocale State4: TranslationFn State5: Translation State1 --> State2 State1 --> State3 State1 --> State4 State1 --> State5 note right of State2: configuration note right of State3 \- lang \- extension (Intl) \- currency \- timezone \- unit \- dir \- domain end note note right of State4 \- loadTranslation$ end note note right of State5 runtime assets end note" %} > `SpeakState` is immutable: it cannot be updated after it is created and is not reactive ### Speak config * `defaultLocale` The default locale to use as fallback * `supportedLocales` List of locales supported by the app * `assets` Translation file names. Each asset is passed to the `loadTranslation$` function to obtain data according to the language * `runtimeAssets` Assets available at runtime * `keySeparator` Separator of nested keys. Default is `.` * `keyValueSeparator` Key-value separator. Default is `@@` * `rewriteRoutes` Rewrite routes as specified in Vite config for `qwikCity` plugin * `domainBasedRouting` Domain-based routing options * `basePath` Base path of the application (e.g. '/reponame' for GitHub Pages) * `showDebugMessagesLocally` Whether to enable local debugging mode. Default is true ### SpeakLocale The `SpeakLocale` object contains the `lang`, in the format `language[-script][-region]`, where: * `language` ISO 639 two-letter or three-letter code * `script` ISO 15924 four-letter script code * `region` ISO 3166 two-letter, uppercase code and optionally contains: * `extension` Language with Intl extensions, in the format `language[-script][-region][-extensions]` like `en-US-u-ca-gregory-nu-latn` to format dates and numbers * `currency` ISO 4217 three-letter code * `timeZone` From the IANA time zone database * `units` Key value pairs of unit identifiers * `dir` Text direction: `'ltr' | 'rtl' | 'auto'` * `domain` In domain-based routing, set the default domain for the locale * `withDomain` In domain-based routing, set another domain for the locale ### Translation functions `TranslationFn` interface can be implemented to change the behavior of the library: * `loadTranslation$` QRL function to load translation data ### Translation `Translation` contains only the key value pairs of the translation data provided with the `runtimeAssets` ## APIs ### Providers `useQwikSpeak(props: QwikSpeakProps)` provides the Speak context to the app. `QwikSpeakProps`: * `config` Speak config * `translationFn` Optional functions to use * `langs` Optional additional languages to preload data for (multilingual) * `currency` Optional currency if different from the current one * `timeZone` Optional time zone if different from the current one `useSpeak(props: SpeakProps)` can be used for lazy loading translation. `SpeakProps`: * `assets` Assets to load * `runtimeAssets` Assets to load available at runtime * `langs` Optional additional languages to preload data for (multilingual) ### Context * `useSpeakContext()` Returns the Speak state * `useSpeakConfig()` Returns the configuration in Speak context * `useSpeakLocale()` Returns the locale in Speak context ### Translate * `inlineTranslate: () => (keys: string | string[], params?: Record