https://github.com/kwhitaker/react-simple-translate
A straightforward translation component to be used with React.
https://github.com/kwhitaker/react-simple-translate
i18n localization node reactjs
Last synced: 2 months ago
JSON representation
A straightforward translation component to be used with React.
- Host: GitHub
- URL: https://github.com/kwhitaker/react-simple-translate
- Owner: kwhitaker
- Created: 2018-07-18T18:32:30.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-28T18:23:51.000Z (almost 8 years ago)
- Last Synced: 2023-07-04T02:11:02.057Z (almost 3 years ago)
- Topics: i18n, localization, node, reactjs
- Language: TypeScript
- Homepage:
- Size: 173 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.com/kwhitaker/react-simple-translate)
# React Simple Translate
An easy to use translation component. Given a translator (which shares the shape of [counterpart](https://github.com/martinandert/counterpart/)), and a set of translations, it will handle locale swapping and string interpolation.
## Installation
```bash
$ npm install react-simple-translate
# or
$ yarn add react-simple translate
```
## Usage
```javascript
import Translate, { TranslatorContext } from "react-simple-translate";
import someTranslator from "some-translator-lib";
someTranslator.registerTranslations("en", {
test: { greeting: "Hello, %(name)s" }
});
someTranslator.registerTranslations("de", {
test: { greeting: "Guten Tag, %(name)s" }
});
someTranslator.setLocale("en");
const Greeting = props => (
test.greeting
);
class TranslatedComponent extends React.Component {
state = {
values: name: "Bob"
}
render() {
return (
);
}
}
// Returns
Hello, Bob
return ;
someTranslator.setLocale("de");
// Returns
Guten Tag, Bob
return ;
```
You can also pass a translator directly to `` if you don't want to use context:
```javascript
import { Translate } from "react-simple-translate/translate"; //Imports the component without the context wrapper
import someTranslator from "some-translator-lib";
const elem = ;
```
## Optional Dependencies
While this component was developed with [counterpart](https://github.com/martinandert/counterpart/) in mind it is optional; you can pass whatever translator you need into it, so long as it matches the expected shape.
## API
### `{children}`
Given a string with keys, replace those keys with values from the current `counterpart` locale.
#### Arguments
- **with: Object**: An object of key/value pairs where the keys match the specified keys in **children**. Values must be of type `React.ReactChild`.
- **children: String | String[]**: A dot notation or array path corresponding to the locale string to be translated.
- **count?: Number**: An optional parameter for handling pluralization.
- **translator: Object**: a translator, matching the shape of `ITranslator`. By default, you should use the context, but you can pass it in as a prop if you need to.
---
### `{children}`
Given a string with keys, replace those keys with values from a provided object.
#### Arguments
- **with: Object**: An object of key value pairs where the keys match the specified keys in **children**. Values must be of type `React.ReactChild`.
- **children**: The string to be interpolated. Keys to replace _must_ be surrouned with `%()s` (i.e. `%(name)s`).
- **count?: Number**: An optional parameter for handling pluralization.
#### Usage
```javascript
import { Interpolate } from "react-simple-translate";
const values = {
name: "Bob"
};
// Returns <>Hello, Bob>
return Hello, %(name)s;
```
---
## Pluralization with Counterpart
Because of a [bug in counterpart](https://github.com/martinandert/counterpart/issues/12), using
pluralization with locales other than the default requires a work-around. To help with this, I've
provided a `localeDefaults` export to be used when registering translations with counterpart.
```javascript
import * as counterpart from "counterpart";
import { localeDefaults } from "react-simple-translate";
const somethingOtherThanDefault = require("./de.json");
counterpart.registerTranslations("de", {
...somethingOtherThanDefault,
...localeDefaults
});
```