A simple react app with multiple languages (english and spanish) with translations automatically sentence cased. For example, "Send Message" will be displayed as "Send message"

App.css

.App {
  font-family: 'Arial', sans-serif;
  text-align: center;
  margin: 20px;
}

h1 {
  color: #333;
}

p {
  color: #666;
}

.message-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.incoming-message,
.outgoing-message {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.incoming-message {
  background-color: #f0f0f0;
}

.outgoing-message {
  background-color: #e6f7ff;
}

App.jsx

import React from "react";

import i18nextInitializer from "./i18nextInitializer";
import en from "./en.json";
import es from "./es.json";
import { useTranslation } from "react-i18next";
import "./App.css";

import LanguageSwitch from "./LanguageSwitch";

i18nextInitializer({ en: { translation: en }, es: { translation: es } });

function App() {
  const { t } = useTranslation();

  return (
    <div className="App">
      <LanguageSwitch />
      <h1>{t("app.title")}</h1>
      <p>{t("app.intro")}</p>

      <div className="message-container">
        <div className="incoming-message">
          {t("messages.incoming", { user: "John", message: "Hey there!" })}
        </div>
        <div className="outgoing-message">
          {t("messages.outgoing", {
            user: "Alice",
            message: "Hi John, how are you?",
          })}
        </div>
      </div>
    </div>
  );
}

export default App;

constants.js

export  const LOWERCASED = "__LOWERCASED__";
export const ANY_CASE = "anyCase";

customFormatter.js

import { LOWERCASED , ANY_CASE} from './constants';

/**
Formatter that lowercase all dynamic part of the text
*/
export const lowerCaseFormatter = (value, format) => {
  if (!value || format === ANY_CASE || typeof value !== "string") {
    return value;
  }
  return LOWERCASED + value.toLocaleLowerCase();
};

customPostProcessor.js

import { LOWERCASED } from './constants';

const sentenceCase = value =>
  value.charAt(0).toLocaleUpperCase() + value.slice(1);

/**
Post processor that undo lowercasing if the dynamic part comes first.
*/
export const sentenceCaseProcessor = {
  type: "postProcessor",
  name: "sentenceCaseProcessor",
  process: value => {
    const shouldSentenceCase = value.startsWith(LOWERCASED);
    value = value.replaceAll(LOWERCASED, "");

    return shouldSentenceCase ? sentenceCase(value) : value;
  },
};

en.json

{
  "app": {
    "title": "Multilingual Messaging App",
    "intro": "Welcome to our multilingual messaging app! Start chatting now."
  },
  "messages": {
    "incoming": "{{user}} sent: {{message}}",
    "outgoing": "You sent to {{user, anyCase}}: {{message, anyCase}}"
  }
}

es.json

{
  "app": {
    "title": "Aplicación de Mensajería Multilingüe",
    "intro": "¡Bienvenido a nuestra aplicación de mensajería multilingüe! Comienza a chatear ahora."
  },
  "messages": {
    "incoming": "{{user}} envió: {{message}}",
    "outgoing": "Enviaste a {{user, anyCase}}: {{message, anyCase}}"
  }
}

i18nextInitializer.js

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";


import { lowerCaseFormatter } from './customFormatter';
import { sentenceCaseProcessor } from './customPostProcessor';

const i18nextInitializer = resources => {
  
    i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .use(sentenceCaseProcessor)
    .init({
      resources: resources,
      fallbackLng: "en",
      interpolation: {
        escapeValue: false,
        skipOnVariables: false,
        alwaysFormat: true,
        format: (value, format, lng, options) => {
          return lowerCaseFormatter(value, format);
        },
      },
      postProcess: [sentenceCaseProcessor.name],
      detection: {
        order: ["querystring", "cookie", "navigator", "path"],
        caches: ["cookie"],
        lookupQuerystring: "lang",
        lookupCookie: "lang",
      },
    });
}

export default i18nextInitializer;

LanguageSwitch.jsx

import React, { useState } from "react";

import { useTranslation } from "react-i18next";

function LanguageSwitch() {
  const { i18n } = useTranslation();
  const [currentLanguage, setCurrentLanguage] = useState("en");

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
    setCurrentLanguage(language);
  };

  return (
    <div className="language-switcher">
      <button
        onClick={() => changeLanguage("en")}
        disabled={currentLanguage === "en"}
      >
        English
      </button>
      <button
        onClick={() => changeLanguage("es")}
        disabled={currentLanguage === "es"}
      >
        Español
      </button>
    </div>
  );
}

export default LanguageSwitch;