@angannat/localize-js NPM

@angannat/localize-js

Simple package to add localization to your javascript project.

bundle size

List of features

String translation in any language
Lazy loading
Lightweight and fast

Installation

With yarn

yarn add @angannat/localize-js

With npm

npm i @angannat/localize-js

Usage with React

Basic example

import { Localize } from "@angannat/localize-js";

const localization = new Localize({
  // Use the browser locale
  locale: navigator.language,
  // We can insert directly strings here.
  stringMap: {
    "en-us": {
      title: "This is a cool title !",
      timeNow: "Current time is {0}.",
    },
    "fr-fr": {
      title: "Ceci est un super titre !",
      timeNow: "Il est {0}.",
    },
  },
});

function App() {
  const [loaded, setLoaded] = React.useState(false);

  // On mount init the library
  React.useEffect(() => {
    localization.init().finally(() => setLoaded(true));
  }, []);
  if (!loaded) {
    return null;
  }
  return (
    <div>
      {/* Get the localized title. */}
      <h1>{localization.localize("title")}</h1>
      {/* Use placeholders to replace part of the localized string. */}
      <p>{localization.localize("timeNow", [Date.now()])}</p>
    </div>
  );
}

Advanced example with asynchronous loading

import React from "react";
import { Localize } from "@angannat/localize-js";

/**
 * Fetch strings from some cdn based on the locale.
 */
const fetchStringsFromCdn = async (locale: string) => {
  const strings = await fetch(`https://some-cdn.test/strings/${locale}.json`);
  return await strings.json();
};

const localization = new Localize({
  // Use the browser locale
  locale: navigator.language,
  // Use the stringsResolver to asynchronously fetch strings
  // Here we are fetching from a cdn
  stringsResolver: fetchStringsFromCdn,
});

export default function App() {
  const [loaded, setLoaded] = React.useState(false);

  // On mount init the library
  React.useEffect(() => {
    localization.init().finally(() => setLoaded(true));
  }, []);
  if (!loaded) {
    return null;
  }
  return (
    <div>
      {/* Get the localized title. */}
      <h1>{localization.localize("title")}</h1>
      {/* Use placeholders to replace part of the localized string. */}
      <p>{localization.localize("timeNow", [Date.now()])}</p>
    </div>
  );
}