https://github.com/mojang/t-component

React translation component
https://github.com/mojang/t-component

Last synced: about 1 month ago
JSON representation

React translation component

• Host: GitHub
• URL: https://github.com/mojang/t-component
• Owner: Mojang
• License: mit
• Created: 2019-10-22T13:38:39.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-07-18T22:12:29.000Z (over 1 year ago)
• Last Synced: 2024-11-05T14:59:53.077Z (about 2 months ago)
• Language: TypeScript
• Size: 1.32 MB
• Stars: 17
• Watchers: 25
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# t-component

This package contains `` component that allows you to translate strings in React using [Jed](https://github.com/messageformat/Jed).

## Contributing

We are not accepting external contributions at this point in time.

## Install

To install this packages run:

```console

$ npm i @mojang/t-component

```

or

```console

$ yarn add @mojang/t-component

```

## Usage

### TranslationProvider

```tsx

import * as React from "react";

import * as ReactDOM from "react-dom";

import { TranslationProvider } from "@mojang/t-component";

import { App } from "./App";

const fetchMessages = async (path: string) => {

  return (await fetch(path)).json();

};

fetchMessages("your/translation/path").then(messages => {

  ReactDOM.render(

    

      

    ,

    document.getElementById("React")

  );

});

```

### T and useTranslation

```tsx

import * as React from "react";

import { T } from "@mojang/t-component";

import { App } from "./App";

export const App = () => {

  const { t } = useTranslation();

  return (

    


      
This text will be translated.

      


        

          {`This text includes a link to that will also be translated`}

        

      

      


        {t("Texts can also be translated with the t function")}

      

    


  )

}


```

## Testing

To run tests, simply run the following command from the root:

```console

$ npm test

```

or

```console

$ yarn test

```

## License

[Licensed under MIT license](/LICENSE).