Usage

<T>

Embed translations in JSX.

import { T } from "@yozora-tech/qfluent";

<h1>
  <T s="hello-world" />
</h1>

args

Pass arguments to fluent strings. Must be a signal for reactivity.

const apples = useSignal(1);
const user = useSignal({ name: "Alice", gender: "female" });

<T s="x-apples" args={apples} />
<T s="greet-user" args={user} />

Non-object values map to $x; object keys map to variable names directly.

x-apples = {
  $x ->
    [one] {$x} apple.
   *[other] {$x} apples.
}

greet-user = Hello, {
  $gender ->
    [female] Ms.
    [male] Mr.
   *[default] Mx.
} {$name}

useT

Useful in non-JSX scenario: task code, alert and prompt, logging.

import { useT } from "@yozora-tech/qfluent";

const count = useSignal(100);
const t_search_empty = useT("search-in-x-entries", count);

<input type="search" placeholder={t_search_empty.value} />

Language Selector

useFluentLocales returns a signal to preferred list of languages.

Modifying its value changes page language instantly.

import { useFluentLocales } from "@yozora-tech/qfluent";
import { i18nResources } from "~/i18n";

const locales = useFluentLocales();

<select
  onChange$={(_event, select) =>
    locales.value = [select.value].concat(navigator.languages)}
  value={locales.value[0]}
>
  {i18nResources.map((res) => (
    <option key={res.locales[0]} value={res.locales[0]}>
      {res.name}
    </option>
  ))}
</select>

useLocalizedTitle

<title> is outside <FluentProvider> so it’s manipulated with DOM.

import { useLocalizedTitle } from "@yozora-tech/qfluent";

export default component$(() => {
  useLocalizedTitle("title-index-page");
  return <Page />;
});

export const head = {
  title: "Index Page",
};

Limitation: client only. SSR stays head.title.