Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barisates/react-translator-component
React language translation module for developing a multilingual project.
https://github.com/barisates/react-translator-component
internationalization localization multilingual react react-component react-translate react-translation react-translator reactjs translate translator
Last synced: 3 months ago
JSON representation
React language translation module for developing a multilingual project.
- Host: GitHub
- URL: https://github.com/barisates/react-translator-component
- Owner: barisates
- License: mit
- Created: 2019-09-13T06:57:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T15:38:59.000Z (almost 2 years ago)
- Last Synced: 2024-09-19T13:21:28.912Z (4 months ago)
- Topics: internationalization, localization, multilingual, react, react-component, react-translate, react-translation, react-translator, reactjs, translate, translator
- Language: JavaScript
- Homepage: https://barisates.github.io/react-translator-component/
- Size: 2.17 MB
- Stars: 18
- Watchers: 2
- Forks: 6
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-translator-component
React language translation module for developing a multilingual project.
[![npm package][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Dependencies Status][david-image]][david-url]
[![Package Size][bundlephobia-image]][bundlephobia-url]
## Getting started
#### Install with NPM:
```
$ npm install react-translator-component
```
#### Usage
**Live Demo [CodeSandbox](https://codesandbox.io/s/react-translator-component-demo-zt12w "CodeSandbox")**
Quite simple to use;
- Make your translator configuration.
- Include text contents in the ```T(text)``` function.
- Finally, call your application in ` /* APP */ `.
```jsx
// App.js
import React from 'react';
import { Translator, T, TF, LanguageList, Config } from 'react-translator-component'
Config.default = 'tr';
Config.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 (
{T("There are no facts, only interpretations.")}
{TF("{0} {1}", "Friedrich", "Nietzsche")}
)
}
function TranslatorApp() {
return (
)
}
export default TranslatorApp;
```
#### Config
```jsx
/* 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.
```jsx
module.exports = {
'{text}': '{translated_text}'
}
```
##### Sample
```jsx
// ./locale/en.js
module.exports = {
'There are no facts, only interpretations.': 'There are no facts, only interpretations.'
}
```
```jsx
// ./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.
```jsx
// 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 `````` component to change the language within your application.
##### Default Theme
Use with the default theme.
``````
##### Dropdown Theme
Use with the dropdown theme.
``````
##### Custom Language List
- Define `````` 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ş**
- http://barisates.com
- [github/barisates](https://github.com/barisates "github/barisates")
**Enes Zeren**
- http://eneszeren.com
- [github/eneszeren](https://github.com/eneszeren "github/eneszeren")
[npm-image]:https://img.shields.io/npm/v/react-translator-component.svg
[npm-url]:https://www.npmjs.com/package/react-translator-component
[travis-image]:https://travis-ci.org/barisates/react-translator-component.svg?branch=master
[travis-url]:https://travis-ci.org/barisates/react-translator-component
[david-image]:https://david-dm.org/barisates/react-translator-component.svg
[david-url]:https://david-dm.org/barisates/react-translator-component
[bundlephobia-image]:https://badgen.net/bundlephobia/minzip/react-translator-component
[bundlephobia-url]:https://bundlephobia.com/result?p=react-translator-component