// Module included in the following assemblies:
//
// * web_console/dynamic-plugin/overview-dynamic-plugin.adoc

:_mod-docs-content-type: PROCEDURE
[id="dynamic-plugin-api_{context}"]
= Translating messages with react-i18next

[role="_abstract"]
The link:https://github.com/openshift/console-plugin-template[plugin template] demonstrates how you can translate messages with link:https://www.i18next.com/[react-i18next].

.Prerequisites
* You must have the plugin template cloned locally.
* Optional: To test your plugin locally, run the 
{product-title} web console in a container. You can use either Docker or Podman 3.2.0 or later.

.Procedure

. Prefix the name with `plugin\__` to avoid any naming conflicts. The plugin template uses the `plugin__console-plugin-template` namespace by default, and you must update when you rename your plugin for example, `plugin__my-plugin`.  You can use the `useTranslation` hook, for example:
+
[source,tsx,subs="+quotes,+macros"]
----
conster Header: React.FC = () ++=>++ {
  const ++{ t } = useTranslation('plugin__console-demo-plugin');++
  ++return <h1>{t('Hello, World!')}</h1>;++
++};++
----
+
[IMPORTANT]
====
You must match the `i18n` namespace with the name of the `ConsolePlugin` resource.
====

. Set the `spec.i18n.loadType` field based on needed behavior.
+
`plugin__console-demo-plugin` **Example**
+
[source,yaml,subs="+quotes,+macros"]
----
spec:
  backend:
    service:
      basePath: ++/++
      name: console-demo-plugin
      namespace: console-demo-plugin
      port: 9001
    type: Service
  displayName: OpenShift Console Demo Plugin
  i18n:
    loadType: Preload
----
+
--
`loadType: Preload`:: Loads all the plugin's localization resources from the `i18n` namespace after the dynamic plugin during loading.
--

. Use the format `++%plugin__console-plugin-template~My Label%++` for labels in `console-extensions.json`. The console replaces the value with the message for the current language from the `plugin__console-plugin-template` namespace. For example:
+
[source,json,subs="+quotes,+macros"]
----
  {
    ++"type": "console.navigation/section"++,
    ++"properties": {++
      ++"id": "admin-demo-section"++,
      ++"perspective": "admin"++,
      ++"name": "%plugin__console-plugin-template~Plugin Template%"++
    }
  }
----

. Include a comment in a TypeScript file for link:https://github.com/i18next/i18next-parser[i18next-parser] to add the message from `console-extensions.json` to your message catalog. For example:
+
[source,tsx,subs="+quotes,+macros"]
----
++// t('plugin__console-demo-plugin~Demo Plugin')++
----

. To update the JSON files in the `locales` folder of the plugin template when adding or changing a message, run the following command:
+
[source,terminal]
----
$ yarn i18n
----