Technical Integration

Loading Translations in Code

Locales are defined as a prop of <RoqProvider>. If no locale is defined, then en-US will be used as the default locale.

<RoqProvider locale="de-DE">
  <Component />
</RoqProvider>

The <RoqProvider> fetches translations from ROQ Platform every five minutes. The data is cached in the user's browser.

Custom Translation Provider

If you are already using a translation system, you can pass a function that takes over the translation.

return (
  <RoqProvider translation={myTranslation}>
    <Component />
  </RoqProvider>
);

Hooks for Translation in React

useRoqTranslation is a React hook - a function that lets you translate your app into multiple languages. It is available under RoqProvider component

How to Use

Key format:

• {key} for component must starts with roq-ui.
• roq-ui.foo & roq-ui.foo.bar will not be working together, you must use roq-ui.foo.foo & roq-ui.foo.bar instead

import { useRoqTranslation } from "@roq/ui-react"
 
function Component() {
  const { t } = useRoqTranslation();
  return <div>{t("hello")}</div>;
}
 
// or
function Component() {
  const { tt } = useRoqTranslation();
  return <div>{tt("hello")}</div>;
}
 
export default function App() {
  return (
    <RoqProvider locale="en-US">
      <Component />
    </RoqProvider>
  );
}

The difference between t and tt is tt will wrap your text with span tag and t will not, it also has attribute data-roq-translation-key which is used for translation management.

tt("profile.floating.manage-account")

it will output

<span data-roq-translation-key="roq-ui.profile.floating.manage-account">Manage Account</span>

Locale Switching

By default, the translation will be loaded base on user's locale, if not existed it will fallback to en-US in Console (opens in a new tab). You can also switch the locale by using RoqProvider component. Texts in components will be changed to de-DE locale.

export default function App() {
  return (
    <RoqProvider locale="de-DE">
      <Component />
    </RoqProvider>
  );
}