https://github.com/alii/react-text-translator

An experimental way to translate text inside React components with context
https://github.com/alii/react-text-translator

context i18n react text translate

Last synced: 15 days ago
JSON representation

An experimental way to translate text inside React components with context

• Host: GitHub
• URL: https://github.com/alii/react-text-translator
• Owner: alii
• Created: 2021-09-24T03:36:12.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-29T14:17:27.000Z (about 3 years ago)
• Last Synced: 2025-01-10T11:05:03.262Z (17 days ago)
• Topics: context, i18n, react, text, translate
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-text-translator
• Size: 68.4 KB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# `react-text-translator`

A typed way to translate react apps with context

Firstly, define your translator as follows

```tsx

import {createTranslations} from 'react-text-translator';

export const translator = createTranslations({

	'Hello World': {

		SPANISH: 'Hola mundo',

		BRITISH: 'Hello World',

	},

	'Contact Us': {

		BRITISH: 'Contact Us',

		SPANISH: 'Contáctanos',

	},

});

export const Text = translator.Text;

```

Second, initialize your context and provide state for the active language

```tsx

import {translator} from './translator';

function LangWrapper() {

	const [lang, setLang] = useState('BRITISH');

	return (

		

			

		

	);

}

```

Then, you are able to use the `` component as you would any other by passing a string as it's children (and only a string).

````tsx

import {Text} from './translator';

export default function Child() {

  return (

    


      Hello World

      Contact Us

    

  );

}```

````