Translate-easy NPM

Translate Easy

Translate Easy simplifies the process of translating text within React applications by providing a flexible set of components and hooks.

Installation

You can install Translate Easy via npm or yarn:

npm install translate-easy

yarn add translate-easy

Usage

Translate Component

The Translate component translates text based on the selected language.

import { Translate } from 'translate-easy';

// Basic usage
<Translate>Hello, world!</Translate>

// Usage with specific translations
<Translate translations={{ 'ar': 'مرحبا بالعالم', 'fr': 'Bonjour le monde!' }}>Hello, world!</Translate>

useTranslate Hook

The useTranslate hook is used to translate text dynamically within components.

import React from 'react';
import { useTranslate as t } from 'translate-easy';

const MyComponent = () => {
  return (
    <input placeholder={t("Enter your name", { ar: "ادخل اسمك" })} />
  );
};

export default MyComponent;

Parameters

text: string - The text to translate.
translations: { key: string: string } (Optional) - Custom translations for the current language.

Returns

string: The translated text.

Default Values

text: The original text if no translation is available.
translations: An empty object if no custom translations are provided.
selectedLanguage: English (code: "en", name: "English")
developmentLanguage: English (code: "en", name: "English")

languages: Array of default languages:

[
  { code: "ar", name: "العربية", isRtl: true },
  { code: "en", name: "English" },
  { code: "fr", name: "Français" },
  { code: "es", name: "Español" },
  { code: "de", name: "Deutsch" },
  { code: "hi", name: "हिन्दी" },
  { code: "it", name: "Italiano" },
  { code: "ja", name: "日本語" },
  { code: "ko", name: "한국어" },
  { code: "zh-CN", name: "中文（简体）" },
  { code: "zh-TW", name: "中文（繁體）" },
]

userSelectedLanguage: English (code: "en", name: "English")
jsonFiles: undefined
useGoogleTranslate: true

LanguageProvider Component

The LanguageProvider component manages language settings and provides language context to child components.

Props

children: ReactNode - The children components.
languages: Language - An array of available languages.
useGoogleTranslate: boolean (Optional) - Whether to use Google Translate for translation. Default is true.
userSelectedLanguage: Language (Optional) - The language selected by the user during runtime. Default is English ({ code: "en", name: "English" }).
developmentLanguage: Language (Optional) - The language used during development. Default is English ({ code: "en", name: "English" }).
jsonFiles: { key: string: string } (Optional) - Bath to the JSON files for translations.

Example

import React from 'react';
import { LanguageProvider } from 'translate-easy';

const App = () => {
  return (
    <LanguageProvider>
      {/* Your app components */}
    </LanguageProvider>
  );
};

export default App;