@paprika/l10n

Description

L10n component can be used in one of two ways: Translating Paprika components, or Translating your own components.

Installation

yarn add @paprika/l10n

or with npm:

npm install @paprika/l10n

Props

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 |

Usage

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 <Collapsible>) in a language other than English, they'd do it like this:

import L10n from "@paprika/l10n";
import Collapsible from "@paprika/collapsible";

<L10n locale="fr">
  ...
  <h4>Mon app</h4>
  <Collapsible />
  ...
</L10n>;

Translating your own components

When someone wants to add their own translations to their own app/components, they'd do it like this:

// 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 (
    <L10n locale="fr" locales={YourLocales}>
      ...
      <GreetingHeader />
      ...
    </L10n>
  );
}

// GreetingHeader.js
import React from "react";
import useI18n from "@paprika/l10n/lib/useI18n";

export default function GreetingHeader() {
  const i18n = useI18n();
  return <h1>{i18n.t("greeting")}</h1>;
}

// YourLocales/index.js
const locales = {};

["en", "fr"].forEach(lng => {
  // eslint-disable-next-line
  Object.assign(locales, require(`./${lng}.js`).default);
});

export default locales;

// YourLocales/en.js
const locales = {
  en: {
    translation: {
      greeting: "Hello",
      farewell: "Goodbye",
    },
  },
};
export default locales;

// 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: Processing failed with 3 errors. Click here to try again. and you want to make the "Click here" substring a <Button onClick={...}> component. You can accomplish this with @paprika/l10n and react-i18next's Trans component:

// YourApp.js
const Locales = {
  en: {
    translation: {
      error: "Processing failed with {{count}} errors. <0>Click here</0> to try again.",
      ...

return (
  <L10n locale="en" locales={Locales}>
    <YourComponent />
  </L10n>
);

// YourComponent.js
import { Trans } from "react-i18next";
import useI18n from "@paprika/l10n/lib/useI18n";

export default function YourComponent() {
  const x = useI18n();
  return (
    <Trans i18nKey="error" i18n={x.i18n} count={3}>
      <Button
        kind="link"
        onClick={...}
      />
    </Trans>
  );
}

Adding new translations

After you have added a new translation to en.yml, in order to see it in Storybook you will need to delete the lib folder and regenerate it:

rm -rf packages/L10n/lib/ && npx lerna bootstrap

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG