Usage

Components

<MercurioProvider>

Wrap you app with the MercurioProvider component:

import { MercurioProvider } from 'mercurio-lives'
const App = () => {
return (
<MercurioProvider
locale="en"
initialLocale="en"
defaultMessage="Not translated"
>
...
</MercurioProvider>
)
}

locale (optional)

Provides a current locale in case you don't want to use the internal context.

initialLocale (required)

Must be one of the previously configurated in babel plugin

defaultMessage (optional)

A default message in case of missing translation.

<Mercurio>

The translation itself:

import { Mercurio } from 'mercurio-lives'
const name = 'Igor'
const Header = () => {
return (
<Mercurio
id="welcomeMessage"
extra={{ name }}
>
Welcome, [name]
</MercurioProvider>
)
}

id (required)

The id of the translation.

extra (optional)

An object to be injected into the translated message.

children (optional)

The children is the default value for the ID. It'll be copied to all locales files (only on creation of the variable, don't worry, it won't mess with your translations).

useLocale hook

A hook to get and set the locale:

import { useLocale, Mercurio } from '~/components/mercurio'
const ChangeLanguageBtn = ({ setLanguage, language }) => {
const [locale, setLocale] = useLocale()
return (
<button type="button" onClick={() => setLocale(locale === 'pt' ? 'en' : 'pt')}>
<Mercurio id="changeLanguageBtn">Switch to Portuguese</Mercurio>
</button>
)
}

Generated files

Locales files

To edit the translations, just edit the locales files located in the locales folder, inside the folder specified in the Babel plugin (or in projectRoot/mercurio/locales if no path was specified).

Translations file

This is a file located in the root of your Mercurio's filesOutput path. It's autogenerated and you shouldn't change anything in it. If you do, it'll recompile and revert what you did.

Edit this page