react-tiny-i18n/dist/react-tiny-i18n.esm.js

A tiny (~500B) i18n implementation for handling translations in React

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

var languageContext =
/*#__PURE__*/
createContext({});
var Provider = languageContext.Provider;
var Languages = function Languages(_ref) {
  var children = _ref.children,
      languages = _ref.languages,
      defaultLanguage = _ref.defaultLanguage;

  var _useState = useState(defaultLanguage),
      currentLanguageKey = _useState[0],
      setCurrentLanguageKey = _useState[1];

  var value = {
    languages: languages,
    currentLanguageKey: currentLanguageKey,
    currentLanguage: typeof languages == 'object' ? languages[currentLanguageKey] : languages,
    setCurrentLanguage: setCurrentLanguageKey,
    availableLanguages: Object.keys(languages)
  };
  return React.createElement(Provider, {
    value: value
  }, children);
};

function Switcher(props) {
  var _useContext = useContext(languageContext),
      currentLanguageKey = _useContext.currentLanguageKey,
      setCurrentLanguage = _useContext.setCurrentLanguage,
      availableLanguages = _useContext.availableLanguages;

  function onChange(e) {
    setCurrentLanguage(e.currentTarget.value);
  }

  return React.createElement("select", Object.assign({
    onChange: onChange,
    value: currentLanguageKey
  }, props), availableLanguages.map(function (language) {
    return React.createElement("option", {
      key: language,
      value: language
    }, language);
  }));
}

function get(obj, path, defaultValue) {
  if (defaultValue === void 0) {
    defaultValue = path;
  }

  var pathArray = path.split('.');
  var index = 0;
  var length = pathArray.length;
  var value = obj;

  while (value != null && index < length) {
    value = value[pathArray[index++]];
  }

  return index && index == length ? value : defaultValue;
}

function replace(string, replacements) {
  var newString = string;
  Object.keys(replacements).forEach(function (key) {
    newString = newString.replace(new RegExp("{{" + key + "}}", 'gm'), replacements[key]);
  });
  return newString;
}

var cache = {};
function Translator(_ref) {
  var children = _ref.children,
      _ref$replacements = _ref.replacements,
      replacements = _ref$replacements === void 0 ? {} : _ref$replacements;

  var _useContext = useContext(languageContext),
      currentLanguage = _useContext.currentLanguage;

  var text;
  var key = children + "." + Object.values(replacements).join('.');

  if (key in cache) {
    return cache[key];
  } // This allows nesting keys deeper than one level


  if (typeof currentLanguage === 'string') {
    text = currentLanguage;
  } else {
    text = get(currentLanguage, children, children);
  }

  if (replacements) {
    text = replace(text, replacements);
  }

  if (text !== children) {
    cache[key] = text;
  }

  return text;
} // Create a way to use the translator outside of a React component

function t(path, replacements) {
  if (replacements === void 0) {
    replacements = {};
  }

  return Translator({
    children: path,
    replacements: replacements
  });
}

export { Languages, Switcher, Translator as T, Translator, t };
//# sourceMappingURL=react-tiny-i18n.esm.js.map