https://github.com/bloodyowl/react-translate

react utilities for simple i18n
https://github.com/bloodyowl/react-translate

Last synced: 2 months ago
JSON representation

react utilities for simple i18n

• Host: GitHub
• URL: https://github.com/bloodyowl/react-translate
• Owner: bloodyowl
• License: mit
• Created: 2015-08-14T10:58:55.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T18:25:26.000Z (over 1 year ago)
• Last Synced: 2024-04-14T15:57:24.347Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 702 KB
• Stars: 109
• Watchers: 6
• Forks: 23
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Lists

• awesome-i18n - react-translate - internationalization for React (📦 Libraries / React / React Native)
• awesome-stars - bloodyowl/react-translate - react utilities for simple i18n (JavaScript)

README

        
# react-translate

> Internationalization for react

## Getting started

```console

$ npm install --save react-translate

# or

$ yarn add react-translate

```

## Usage

### With hooks

```javascript

import { TranslatorProvider, useTranslate } from "react-translate"

let translations = {

  locale: "en",

  Home: {

    "HELLO": "Helloworld!"

  }

};

function Home() {

  let t = useTranslate("Home");

  return 
 {t("HELLO")} 

}


function App() {

  return (

    

      

    

  )

}

```

### With legacy API

```javascript

import { TranslatorProvider, translate } from "react-translate"

let translations = {

  locale: "en",

  Home: {

    "HELLO": "Helloworld!"

  }

};

let Home = function({t}) {

  return 
 {t("HELLO")} 

}


Home = translate("Home")(Home);

function App() {

  return (

    

      

    

  )

}

```

## API

### ``

Provides the translation data for descendant components.

```javascript

import { render } from "react-dom";

import { TranslatorProvider } from "react-translate";

// …

render(

  

    

  ,

  mountNode

);

```

### useTranslate(namespace)

Returns a `t` function that returns translations under `namespace`.

### translate(namespace)

Wraps a component and passes a `t` function as a prop.

#### Arguments

- `namespace` (_String_) 

#### Usage

```javascript

const Header = ({ t }) => 
 {t("TITLE")} 
;


export default translate("Header")(Header);

```

### t(key [, params])

The `t` function is the one that returns your translations given the key, and optionally some parameters.

```javascript

// for a simple key

t("KEY"); // "value"

// for a key with a parameter

t("KEY", { foo: "bar" }); // replaces "{{foo}}" in the translation with "bar"

// for a key with a numeral parameter, which makes `t` choose between singular

// and plural

t("KEY", { n: 2 });

```

## Organizing the `translations` object

Translations should be grouped by component:

```js

const translations = {

  // the `locale` parameter is mandatory, it enables react-translate to use

  // the right rules for singular and plural

  locale: "fr",

  ComponentName: {

    SIMPLE_KEY: "Helloworld",

    KEY_WITH_PARAMS: "Hello {{name}}",

    KEY_WITH_PLURAL: ["You have {{n}} message", "You have {{n}} messages"]

  }

};

```

## How do I load translations ?

ReactTranslate does not give you a specific way to load translations, its goal is only to provide a way to pass translations down to your app components'.

You can use a simple XHR call, put translations in a `` in

your HTML page, or any other way you find adequate.