talkr/dist/index.mjs

Talkr is the lightest i18n provider for React applications. It supports Typescript, provides autocompletion, has 0 dependencies, and is very easy to use.

import * as React from 'react';
import { createContext, useState, useContext } from 'react';

// src/index.tsx

// src/initLocale.ts
var getBrowserLanguage = (defaultLanguage) => {
  if (typeof navigator !== "undefined") {
    return navigator.language.split("-")[0];
  }
  return defaultLanguage;
};
var initLocale = (defaultLanguage, detectBrowserLanguage = false) => {
  if (detectBrowserLanguage) return getBrowserLanguage(defaultLanguage);
  return defaultLanguage;
};

// src/tr.tsx
var getPlural = (count, locale) => {
  if (typeof Intl == "object" && typeof Intl.PluralRules == "function") {
    return new Intl.PluralRules(locale).select(count);
  }
  return count === 0 ? "zero" : count === 1 ? "one" : "other";
};
var getList = (list, locale, options) => {
  if (typeof Intl == "object" && typeof Intl.ListFormat == "function") {
    const formatter = new Intl.ListFormat(locale, {
      style: options?.listStyle || "narrow",
      type: options?.listType || "conjunction"
    });
    return formatter.format(list);
  }
  return list.join(", ");
};
function tr({ locale, languages, defaultLanguage }, key, params) {
  const currentLocale = !languages[locale] ? defaultLanguage : locale;
  let result = languages[currentLocale];
  let currentKey = key;
  if (params && Object.keys(params).includes("count")) {
    const plural = getPlural(params.count, currentLocale);
    currentKey += params.count === 0 ? ".zero" : plural === "other" ? ".many" : `.${plural}`;
  }
  if (params?.gender) {
    currentKey += params.gender === "m" ? ".male" : ".female";
  }
  currentKey.split(".").forEach((k) => {
    if (!result[k]) return;
    return result = result[k];
  });
  if (Array.isArray(result)) {
    return getList(result, locale, params);
  }
  if (typeof result === "string") {
    return params ? result.split("__").map((word) => params[word] || word).join("") : result;
  }
  console.warn(`Talkr: Missing translation for ${key}`);
  return "";
}

// src/index.tsx
var TalkrContext = createContext({
  locale: "",
  setLocale: () => null,
  languages: {},
  defaultLanguage: ""
});
function Talkr({
  children,
  languages,
  defaultLanguage,
  detectBrowserLanguage
}) {
  const [locale, setLocale] = useState(
    initLocale(defaultLanguage, detectBrowserLanguage)
  );
  return /* @__PURE__ */ React.createElement(
    TalkrContext.Provider,
    {
      value: { locale, setLocale, languages, defaultLanguage }
    },
    children
  );
}
function useT() {
  const { setLocale, ...props } = useContext(TalkrContext);
  return {
    ...props,
    setLocale,
    T: (key, params) => tr(props, key, params)
  };
}

export { Talkr, TalkrContext, tr, useT };