@oyvindher/react-translate

react-translate

Setup and installation

Clone repository

$ git clone https://github.com/oyvindhermansen/react-translate.git

To install dependencies:

bun install

To build:

bun run build

What challenge does this attempt to solve?

This is a solution for creating easy translations for React SPA's. It provides a scalable solution to adding different languages to e.g a dashboard or some other type of SPA-application.

This is how it works:

Provider setup

import { TranslateProvider } from "@oyvindher/react-translate";

const translations = {
  no: {
    intro: "Velkommen",
  },
  en: {
    intro: "Welcome",
  },
};

const App: React.FC = () => {
  return (
    <TranslateProvider translations={translations} lang="no">
      <MyApplication />
    </TranslateProvider>
  );
};

Hook it up

import { useTranslate } from "@oyvindher/react-translate";

const MyApplication: React.FC = () => {
  const { t } = useTranslate();

  return (
    <div>
      <h1>{t("intro")}</h1>
    </div>
  );
};

Dynamic values?? We got em.

The translations can contain a variable if wrapped in {{ }}.

So if the translation object looks like this:

const translations = {
  no: {
    intro: "Velkommen, {{username}}",
  },
  en: {
    intro: "Welcome, {{username}}",
  },
};

The translator function takes variables as a second argument, and will be mapped to the name of the variable.

import { useTranslate } from "@oyvindher/react-translate";

const MyApplication: React.FC = () => {
  const { t } = useTranslate();
  const user = "John Doe";

  return (
    <div>
      <h1>{t("intro", { username: user })}</h1>
    </div>
  );
};

BUN for the win.

This project was created using bun init in bun v1.2.4. Bun is a fast all-in-one JavaScript runtime.