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.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124import { Suspense, useEffect, useState } from 'react';import { useTick } from '@wojtekmaj/react-hooks';import T, { TProvider, useTranslation } from '@wojtekmaj/react-t';
import LocaleOptions from './LocaleOptions.js';import Options from './Options.js';
import './Test.css';
import { delayedLanguageFiles, languageFiles } from './i18n/index.js';
import type { PassMethod } from './shared/types.js';
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> <h3>Always in Spanish</h3> <TProvider locale="es"> <p> <T>Hello world!</T> </p> </TProvider> <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 [delay, setDelay] = useState(false); const [suspend, setSuspend] = useState(false); 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 ( <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} /> <Options delay={delay} passMethod={passMethod} suspend={suspend} setDelay={setDelay} setPassMethod={setPassMethod} setSuspend={setSuspend} /> </aside> <Suspense fallback={<div>Loading…</div>}> <TProvider key={suspend ? 'provider-suspend' : 'provider'} locale={passMethod === 'prop' ? locale : undefined} languageFiles={delay ? delayedLanguageFiles : languageFiles} suspend={suspend} > <TestContent /> </TProvider> </Suspense> </div> </div> );}