react-text-translator

A typed way to translate react apps with context

Firstly, define your translator as follows

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

import {translator} from './translator';

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

	return (
		<translator.TranslationProvider activeLang={lang}>
			<App />
		</translator.TranslationProvider>
	);
}

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

import {Text} from './translator';

export default function Child() {
  return (
    <div>
      <Text>Hello World</Text>
      <Text>Contact Us</Text>
    </div>
  );
}```