https://github.com/cristianbote/react-translate-json

:earth_americas: Make react speak your language
https://github.com/cristianbote/react-translate-json

json preact react translate translations

Last synced: about 2 months ago
JSON representation

:earth_americas: Make react speak your language

• Host: GitHub
• URL: https://github.com/cristianbote/react-translate-json
• Owner: cristianbote
• Created: 2017-10-13T21:10:06.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-29T10:48:03.000Z (almost 7 years ago)
• Last Synced: 2024-11-19T17:58:39.926Z (2 months ago)
• Topics: json, preact, react, translate, translations
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Make react speak your language.

=

[![npm version](https://badge.fury.io/js/react-translate-json.svg?bust)](https://badge.fury.io/js/react-translate-json) 

[![codecov.io Code Coverage](https://img.shields.io/codecov/c/github/cristianbote/react-translate-json.svg?maxAge=2592000)](https://codecov.io/github/cristianbote/react-translate-json?branch=master) 

[![Build Status](https://travis-ci.org/cristianbote/react-translate-json.svg?branch=master)](https://travis-ci.org/cristianbote/react-translate-json)

Overview

--------

### Instalation

```

npm install --save react-translate-json

# or

yarn add react-translate-json

```

### Getting started

Just think of it in these steps:

1. Define your translation directory

1. Define the current user locale code, e.g. `'en'`, `'de'`, `'fr'` and so on.

1. Optionally use a fallback language code. Usually `'en'`.

Then, use the thin, built-in component, to translate your strings.

#### Example

The following examples are based on `create-react-app` results.

```json

// This is our json file, with translations

{

  "HELLO": "Hi {{user}}!",

  "PAGES": {

    "HOME": {

      "TITLE": "Home Page Title"

    }

  }

}

```

```js

// This is usually our index.js

import React from 'react';

import ReactDOM from 'react-dom';

// Import the TranslateProvider function to provide the service with your settings

import { TranslateProvider } from 'react-translate-json';

import App from './App';

const translationOptions = {

    pathPrefix: '/translations', // Path to your translations

    locale: 'en', // User current locale

    fallbackLocale: 'en' // Fallback locale

};

// That's it! You are all set!

ReactDOM.render(

    

        

    ,

    document.getElementById('root')

);

```

Now, you can easily add in your translations by importing the component.

```js

// App.js

import React, { Component } from 'react';

import { TranslateComponent } from 'react-translate-json/react';

class App extends Component {

  render() {

    return (

      


        

          

          

          {/* Render-prop based */}

           (

            
{res}

          )}/>

          

          {/* Regular component usage */}

          


              

          


        

        


          To get started, edit src/App.js and save to reload.

        

      

    );

  }

}


export default App;

```

#### Preact

```js

// App.js

import { Component, h } from 'preact';

import { TranslateComponent } from 'react-translate-json/preact';

class App extends Component {

  render() {

    return (

      


          


              

          

      

    );

  }

}


export default App;

```