Newlyweds Proposing Marriage

    react-translator-component

    2.2.0 • Public • Published

    react-translator-component

    React language translation module for developing a multilingual project.

    npm package Build Status Dependencies Status Package Size

    Getting started

    Install with NPM:

    $ npm install react-translator-component
    

    Usage

    Live Demo CodeSandbox

    Quite simple to use;

    • Make your translator configuration.
    • Include text contents in the T(text) function.
    • Finally, call your application in <Translator> /* APP */ </Translator>.
    // App.js
    import React from 'react';
    import { Translator, T, TF, LanguageList, Config } from 'react-translator-component'
    
    Config.default = 'tr';
    Config.list = {
      default: 'en',
      list: {
        en: {
          text: 'English',
          icon: require('./locale/flags/en.svg'),
          file: require('./locale/en.js')
        },
        tr: {
          text: 'Türkçe',
          icon: require('./locale/flags/tr.svg'),
          file: require('./locale/tr.js')
        }
      }
    }
    
    function App() {
      return (
        <div>
          <h1>
            {T("There are no facts, only interpretations.")}
          </h1>
          <h6>
            {TF("{0} {1}", "Friedrich", "Nietzsche")}
          </h6>
          <LanguageList />
        </div>
      )
    }
    
    function TranslatorApp() {
      return (
        <Translator>
          <App />
        </Translator>
      )
    }
    
    export default TranslatorApp;

    Config

    /* Default Language */
    Config.default = 'tr';
    
    /* Language List */
    Config.list = {
      de: {
        // display text
        text: 'Deutsch',
        // display icon
        icon: require('./locale/flags/de.svg'),
        // translate file
        file: require('./locale/de')
      },
      en: {
        text: 'English',
        icon: require('./locale/flags/en.svg'),
        file: require('./locale/en')
      },
      tr: {
        text: 'Türkçe',
        icon: require('./locale/flags/tr.svg'),
        file: require('./locale/tr')
      }
    }

    Translate File

    {key} The text you have written into the T(text) function. {translated_text} Related translation text.

    module.exports = {
        '{text}': '{translated_text}'
    }
    Sample
    // ./locale/en.js
    module.exports = {
        'There are no facts, only interpretations.': 'There are no facts, only interpretations.'
    }
    // ./locale/tr.js
    module.exports = {
        'There are no facts, only interpretations.': 'Doğrular ve yanlışlar yoktur, sadece yorumlar vardır.'
    }

    Translate Function

    You can develop a multilingual application by typing the text as it is without using any key. Type the text content into the T(text) or TF(text, ...arg) function and update the translation files.

    // simple usage
    T("The text you want to translate.");
    
    // usage with arguments like a string.format
    TF("The {0} you want to translate with {1}.", "text", "arguments");

    Texts that have not been added to the Translate file will be collected at the rtc-missing-keys in LocalStorage.

    Language List

    Use the <LanguageList /> component to change the language within your application.

    Default Theme

    Use with the default theme.

    <LanguageList />

    Default Theme

    Dropdown Theme

    Use with the dropdown theme.

    <LanguageList Theme="Dropdown" />

    Default Theme

    Custom Language List
    • Define <LanguageList Language={this.state.language} /> in this way to create your own language list.
    • When {this.state.language} in changes, your application will be render in that language.

    Author

    Barış Ateş

    Enes Zeren

    Install

    npm i react-translator-component

    DownloadsWeekly Downloads

    36

    Version

    2.2.0

    License

    ISC

    Unpacked Size

    39.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • ezeren
    • barisates