Skip to content

A tiny hook to manage translations in your React Application

Notifications You must be signed in to change notification settings

rmdort/tinytranslate

Repository files navigation

TinyTranslate

A tiny hook to manage translations in your React Application

MIT license node workflow

Features

  1. Support for deeply nested objects. Eg: translate('profile.top.heading')
  2. 100% Test coverage
  3. Fully controlled and stateless

Install

yarn add tinytranslate

OR

npm i tinytranslate --save

Usage

  1. Define your translations
const translations = {
  en: {
    locale: "en-US",
    messages: {
      hello: "Hello {name}",
    },
  },
};
  1. Add TranslationProvider to your app
import { TranslationProvider } from "tinytranslate";

const App = () => {
  return (
    <TranslationProvider translations={translations} locale="en">
      <Header />
    </TranslationProvider>
  );
};
  1. Use useTranslation hook
import { useTranslation } from 'tinytranslate'

const Header = () => {
  const translate = useTranslation()

  return <>{translate('hello'}</>
}