L10n component can be used in one of two ways: Translating Paprika components, or Translating your own components.
npm install @paprika/l10nL10n component can be used in one of two ways: Translating Paprika components, or Translating your own components.
``
yarn add @paprika/l10n
or with npm:
`
npm install @paprika/l10n
| Prop | Type | required | default | Description |
| -------- | ------ | -------- | ------- | --------------------------- |
| locale | string | false | "en" | Sets the preferred language |
| locales | object | false | null | |
| children | node | true | - | Children of the L10n |
This component can be used in one of two ways: Translating Paprika components, or Translating your own components.
#### Translating Paprika components
When someone wants to use a Paprika component that has translatable text (like the ) in a language other than English, they'd do it like this:
`jsx
import L10n from "@paprika/l10n";
import Collapsible from "@paprika/collapsible";
...
Mon app
...
`
#### Translating your own components
When someone wants to add their own translations to their own app/components, they'd do it like this:
`jsx
// App.js
import React from "react";
import L10n from "@paprika/l10n";
import YourLocales from "./YourLocales";
import GreetingHeader from "./GreetingHeader";
export default function FakeAppWithLocales(props) {
return (
...
...
);
}
`
`jsx
// GreetingHeader.js
import React from "react";
import useI18n from "@paprika/l10n/lib/useI18n";
export default function GreetingHeader() {
const i18n = useI18n();
return
jsx
// YourLocales/index.js
const locales = {};["en", "fr"].forEach(lng => {
// eslint-disable-next-line
Object.assign(locales, require(
./${lng}.js).default);
});export default locales;
`jsx
// YourLocales/en.js
const locales = {
en: {
translation: {
greeting: "Hello",
farewell: "Goodbye",
},
},
};
export default locales;
`jsx
// YourLocales/fr.js
const locales = {
fr: {
translation: {
greeting: "Bonjour",
farewell: "Au revoir",
},
},
};
export default locales;
`Please do not using the same translation key as paprika's to avoid overriding. You can check them from here: https://github.com/acl-services/paprika/blob/master/packages/L10n/src/locales/en.yml
Interpolating components within a translation
Imagine you have the string:
and you want to make the "Click here" substring a