Using Talkr library for internationalization

map screenshot

Recently I returned to one of my older projects - Gdynia Open Data. I've added few more functionalities, including internationalization. I don't expect that this project will be used by anyone other than me but I wanted to refresh my knowledge about the aspect of internationalization in web apps.

So far I've used only one solution - react-i18next. The most popular among the developers, very mature and opinionated. However in this tiny project I wanted to try a new library. I had to translate around 30 phrases. Not much, probably not enough to use any additional tool.

First, I gathered information about the possible solutions and compared the bundle size.

Library Minified size [kb] Minified + Gzipped [kb]
react-i18next 23.3 7.1
react-intl 62.9 17.8
react-intl-universal 86.8 27.7
linguiJS - lingui/react - 6.7
- lingui/cli - ?
- lingui/macro - 274.5
- 2.5
- ?
- 81
react-translate-component 9.6 3.5
react-translated 10 3.5
talkr 2.1 0.996

All of them have pros and cons, and all of them will do their job. I decided to choose the one that has the smallest bundle size - talkr.

It's tiny, but it has some interesting features like:

  • zero dependecies

  • Typescript autocompletions for your translations

  • gender-adapter translations

  • react-native support

  • supports plural rules for translations


First, wrap your application entry point - probably it is App in a Talkr provider.


import React from "react";
import { Talkr } from "talkr";
import en from "../../locales/en_translation.json";
import pl from "../../locales/pl_translation.json";

const App: React.FC = () => {
  return (
    <Talkr languages={{ en, pl }} defaultLanguage="en">
        // Rest of your app

export default App;

Now lets' create the JSON files with translations, the same way you would do it using react-i18next.


  "air temperature": "Air temperature",
  "surface temperature": "Surface temperature",
  "wind direction": "Wind direction",  


  "air temperature": "Temperatura powietrza",
  "surface temperature": "Temperatura powietrza",
  "wind direction": "Kierunek wiatru",  

These file are imported in the same place that we use Talkr provider (App.tsx in this example).

That's it. Library is configured and we can use it in any component.


import React from "react";
import { useT } from "talkr";

const WeatherIndicator: React.FC = () => {
  const { T } = useT();
  return (
      <h1>{T("air temperature")</h1>  

export default WeatherIndicator;

Other feature that you need if you have multiple languages in your app is the possibility of changing the language. Here's how to do it with talkr


import React from "react";
import { useT } from "talkr";

const LanguageSwitcher: React.FC = () => {
  const { setLocale, locale } = useT();

  return (
        <p>Current language: {locale}</p>
        <button onClick={() => setLocale("en")}>English</button>
        <button onClick={() => setLocale("pl")}>Polish</button>

export default LanguageSwitcher;

Typescript autocompletion for translation keys

Like in react-i18next there's a possibility to get the keys from your translation files and use them to type-check while using the usetT hook.

First, we have to create a new hook. Create a file translate.tsx somewhere in your project.


import { useT as useTr, Autocomplete, TParams, tr } from "talkr";
import en from "./locales/en.json";

type Key = Autocomplete<typeof en>;

export const useAutocompleteT = () => {
  const { locale, setLocale, languages, defaultLanguage } = useT();
  return {
    T: (key: Key, params?: TParams) =>
      tr({ locale, languages, defaultLanguage }, key, params),

Now, we have to use this newly created hook instead of the useT directly from the library. Your IDE will suggest you the possible keys while using the T function.


import React from "react";
import { useAutocompleteT } from "translate";

const WeatherIndicator: React.FC = () => {
  const { T } = useAutocompleteT();
  return (
      <h1>{T("air temperature")</h1>  

export default WeatherIndicator;