Hooks for translation in React

Introduction

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>
  );
}