Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/wojtekmaj/react-t. Simple translation module for React applications.
Something went wrong. Try again.
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100import React, { useEffect, useState } from 'react';import T, { TProvider, useTranslation } from '@wojtekmaj/react-t/src';import { useTick } from '@wojtekmaj/react-hooks';
import LocaleOptions from './LocaleOptions';import PassingOptions from './PassingOptions';
import './Test.css';
import { languageFiles } from './i18n';
import type { PassMethod } from './shared/types';
function FancyJohn() { const tick = useTick(); const oneTwo = tick % 2 === 0;
return ( <strong> {oneTwo ? '✨' : '🌟'} John {oneTwo ? '🌟' : '✨'} </strong> );}
function TestContent() { const stringOne = useTranslation('Hello world!'); const stringTwo = useTranslation('Hello {name}!', { name: 'John' }); const stringThree = useTranslation('Hello {name} and {other}!', { name: 'John', other: 'Elisabeth', }); const stringFour = useTranslation('Hello {name}! Nice to meet you {name}!', { name: 'John', }); const stringFive = useTranslation('Hello {name}!', { name: <FancyJohn /> });
return ( <main className="Test__container__content"> <h2> Using <code>T</code> component </h2> <p> <T>Hello world!</T> </p> <p> <T name="John">{`Hello {name}!`}</T> </p> <p> <T name="John" other="Elisabeth">{`Hello {name} and {other}!`}</T> </p> <p> <T name="John">{`Hello {name}! Nice to meet you {name}!`}</T> </p> <p> <T name={<FancyJohn />}>{`Hello {name}!`}</T> </p> <h2> Using <code>useTranslation</code> hook </h2> <p>{stringOne}</p> <p>{stringTwo}</p> <p>{stringThree}</p> <p>{stringFour}</p> <p>{stringFive}</p> </main> );}
export default function Test() { const [locale, setLocale] = useState<string>(); const [passMethod, setPassMethod] = useState<PassMethod>('attribute');
useEffect(() => { const html = document.documentElement;
if (locale && passMethod === 'attribute') { html.setAttribute('lang', locale); } else { html.removeAttribute('lang'); } }, [locale, passMethod]);
return ( <TProvider locale={passMethod === 'prop' ? locale : undefined} languageFiles={languageFiles}> <div className="Test"> <header> <h1>react-t test page</h1> </header> <div className="Test__container"> <aside className="Test__container__options"> <LocaleOptions locale={locale} setLocale={setLocale} /> <PassingOptions passMethod={passMethod} setPassMethod={setPassMethod} /> </aside> <TestContent /> </div> </div> </TProvider> );}