Jak používat React Intl k internacionalizaci vašich aplikací React

Obsah

React Intl je široce využívaná knihovna, poskytující rozsáhlý soubor komponent a nástrojů pro internacionalizaci aplikací postavených na Reactu. Internacionalizace, často označovaná zkratkou i18n, představuje proces adaptace softwaru pro různé jazykové a kulturní kontexty.

Díky ReactIntl je implementace podpory pro vícero jazyků a lokalizací ve vaší aplikaci React snadná a efektivní.

Instalace React Intl

Před použitím knihovny React Intl je nutné ji nejprve nainstalovat. K tomu můžete využít jeden z několika správců balíčků: npm, yarn nebo pnpm.

Pro instalaci pomocí npm použijte tento příkaz ve vašem terminálu:

 npm install react-intl

Pro instalaci pomocí yarn použijte tento příkaz:

 yarn add react-intl

Jak používat knihovnu React Intl

Po úspěšné instalaci knihovny React Intl můžete začít využívat její komponenty a funkce ve vaší aplikaci. React Intl se v mnoha ohledech podobá nativnímu JavaScript Intl API.

Klíčové komponenty, které React Intl nabízí, zahrnují zejména FormattedMessage a IntlProvider.

Komponenta FormattedMessage je zodpovědná za zobrazování přeložených textových řetězců v uživatelském rozhraní, zatímco komponenta IntlProvider zajišťuje poskytování překladů a informací o formátování pro celou aplikaci.

Před samotným použitím komponent FormattedMessage a IntlProvider pro překlad aplikace je nutné vytvořit překladový soubor. Tento soubor obsahuje veškeré překlady pro vaši aplikaci. Můžete se rozhodnout pro oddělené soubory pro každý jazyk a lokalizaci, nebo pro jeden soubor obsahující všechny překlady.

Zde je příklad:

 export const messagesInFrench = {
   greeting: "Bonjour {name}"
}
   
export const messagesInItalian = {
   greeting: "Buongiorno {name}"
}

Tento ukázkový překladový soubor obsahuje dva objekty překladů: `messagesInFrench` a `messagesInItalian`. Zástupný symbol `{name}` v uvítacím řetězci je určen k dynamickému nahrazení za běhu aplikace.

Pro využití překladů ve vaší aplikaci je třeba obalit kořenovou komponentu aplikace do komponenty `IntlProvider`. Komponenta `IntlProvider` akceptuje tři důležité vlastnosti (props) v Reactu: `locale`, `defaultLocale` a `messages`.

Vlastnost `locale` přijímá řetězec specifikující preferovanou lokalizaci uživatele, zatímco `defaultLocale` určuje výchozí jazyk, který se použije, pokud preferovaná lokalizace uživatele není dostupná. Vlastnost `messages` pak přijímá samotný objekt překladů.

Následuje příklad použití komponenty `IntlProvider`:

 import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
      <App />
    </IntlProvider>
  </React.StrictMode>
);

V tomto příkladu se do komponenty `IntlProvider` předávají lokalizace `fr`, překlad `messagesInFrench` a výchozí lokalizace `en`.

Můžete předat i více než jednu lokalizaci nebo překladový objekt a `IntlProvider` automaticky detekuje jazyk prohlížeče uživatele a použije odpovídající překlady.

Pro zobrazení přeložených textových řetězců v aplikaci použijte komponentu `FormattedMessage`. Tato komponenta akceptuje `id` prop, který odpovídá ID zprávy v objektu zpráv.

Komponenta také akceptuje `defaultMessage` a `values` props. Prop `defaultMessage` specifikuje nouzovou zprávu, která se použije, pokud překlad pro aktuální lokalizaci není dostupný, zatímco prop `values` poskytuje dynamické hodnoty pro zástupné symboly v přeložených zprávách.

Například:

 import React from "react";
import { FormattedMessage } from "react-intl";function App() {
  return (
    <div>
      <p>
        <FormattedMessage
          id="greeting"
          defaultMessage="Good morning {name}"
          values={{ name: 'John'}}
        />
      </p>
    </div>
  );
}
export default App;

V tomto ukázkovém bloku kódu prop `id` komponenty `FormattedMessage` odkazuje na klíč `greeting` z objektu `messagesInFrench` a `values` prop nahradí zástupný symbol `{name}` hodnotou „John“.

Formátování čísel pomocí komponenty FormattedNumber

React Intl také nabízí komponentu `FormattedNumber`, kterou můžete využít k formátování čísel na základě aktuální lokalizace. Tato komponenta přijímá různé parametry pro konfiguraci formátování, například styl, měnu a minimální a maximální počet desetinných míst.

Zde je několik příkladů:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        Decimal: <FormattedNumber value={123.456} style="decimal" />
      </p>
      <p>
        Percent: <FormattedNumber value={123.456} style="percent" />
      </p>
    </div>
  );
}
export default App;

Tento příklad používá komponentu `FormattedNumber`, která přijímá `value` prop pro určení čísla, které má být formátováno.

Prostřednictvím prop `style` můžete upravit formát zobrazení čísla. Můžete nastavit `style` na hodnotu `decimal`, `percent` nebo `currency`.

Pokud nastavíte `style` na `currency`, komponenta `FormattedNumber` naformátuje číslo jako hodnotu měny, s použitím kódu měny specifikovaného v prop `currency`:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
      </p>
    </div>
  );
}
export default App;

V uvedeném bloku kódu komponenta `FormattedNumber` formátuje číslo s použitím stylu `currency` a měny USD.

Čísla můžete formátovat s definovaným počtem desetinných míst pomocí vlastností `minimumFractionDigits` a `maximumFractionDigits`.

`minimumFractionDigits` určuje minimální počet zobrazovaných desetinných míst. Naopak, `maximumFractionDigits` určuje maximální počet zobrazovaných desetinných míst.

Pokud má číslo méně desetinných míst, než je specifikováno v `minimumFractionDigits`, React Intl jej doplní nulami. Pokud má číslo více desetinných míst, než je nastaveno v `maximumFractionDigits`, knihovna číslo zaokrouhlí.

Zde je příklad demonstrující použití těchto vlastností:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        <FormattedNumber
          value={123.4567}
          minimumFractionDigits={2}
          maximumFractionDigits={3}
        />
      </p>
    </div>
  );
}
export default App;

Formátování dat pomocí komponenty FormattedDate

Data můžete formátovat způsobem, který je konzistentní a snadno srozumitelný pomocí React Intl. Komponenta `FormattedDate` představuje jednoduchý a efektivní nástroj pro formátování dat. Funguje podobným způsobem jako knihovny pro práci s datem a časem, jako je například Moment.js.

Komponenta `FormattedDate` vyžaduje řadu vlastností (props), jako například `value`, `day`, `month` a `year`. Prop `value` přijímá datum, které chcete formátovat, a další props slouží ke konfiguraci jeho formátu.

Například:

 import React from "react";
import { FormattedDate } from "react-intl";function App() {
  const today = new Date();
  return (
    <div>
      <p>
        Today's date is
        <FormattedDate
          value={today}
          day="numeric"
          month="long"
          year="numeric"
        />
      </p>
    </div>
  );
}
export default App;

V tomto příkladu `value` prop používá aktuální datum. Pomocí props `day`, `month` a `year` také specifikujeme, že chceme, aby se rok, měsíc a den zobrazovaly v dlouhém formátu.

Kromě `day`, `month` a `year` existují i další props, které ovlivňují vzhled data. Následuje seznam těchto vlastností a hodnot, které akceptují:

rok: „numeric“, „2-digit“
měsíc: „numeric“, „2-digit“, „narrow“, „short“, „long“
den: „numeric“, „2-digit“
hodina: „numeric“, „2-digit“
minuta: „numeric“, „2-digit“
sekunda: „numeric“, „2-digit“
timeZoneName: „short“, „long“

Komponentu `FormattedDate` můžete také použít pro formátování a zobrazení času:

 import React from "react";
import { FormattedDate } from "react-intl";function App() {
  const today = new Date();
  return (
    <div>
      <p>
        The time is
        <FormattedDate
          value={today}
          hour="numeric"
          minute="numeric"
          second="numeric"
        />
      </p>
    </div>
  );
}
export default App;

Internacionalizujte své aplikace React pro širší publikum

Naučili jste se, jak instalovat a konfigurovat knihovnu React-Intl ve vaší aplikaci React. React-intl významně usnadňuje formátování čísel, dat a měn ve vaší aplikaci React. Data lze formátovat na základě preferované lokalizace uživatele pomocí komponent `FormattedMessage`, `FormattedNumber` a `FormattedDate`.

Vývojáři React často dělají chyby, které mohou mít závažné následky. Například nesprávná aktualizace stavu. Je důležité být si vědom těchto častých chyb a včas je napravit, abyste se vyhnuli potenciálním problémům.