Search code examples
internationalizationdocusaurus

How i18n works for Docusaurus src/components?

I have i18n perfectly setup and working for themes and plugins of a Docusaurus website.

But for the homepage, I have a component Foo.js located in src/components/Foo.js.

It contains a const Bar = 'happy';

Is a text string that will be part of the HTML returned by the component and I want it translated.

I guess it should be possible; in the documentation is stated:

JSON is used to translate: Your React code: standalone React pages in src/pages, or other components

and

code.json # Any text label present in the React code

The Bar text is not extracted with docusaurus write-translations.

Should I add manually to code.json ? If yes, which is the correct key to use?

Thank you in advance for your help.

Solution

  • You need to import the Translate component and use it to wrap translatable strings in your custom code.

    Details and examples can be found in the Translate your React code section in the Docusaurus i18n documentation.

    For your example you'd end up with something like:

    import Translate from '@docusaurus/Translate';
const Bar = <Translate id="mcall.foo.bar">happy</Translate>