process(handlerInput) { // Gets the locale from the request and initializes i18next. const localizationClient = i18n.init({ lng: handlerInput.requestEnvelope.request.locale, resources: languageStrings, returnObjects: true }); // Creates a localize function to support arguments. localizationClient.localize = function localize() { // gets arguments through and passes them to // i18next using sprintf to replace string placeholders // with arguments. const args = arguments; const value = i18n.t(...args); // If an array is used then a random value is selected if (Array.isArray(value)) { return value[Math.floor(Math.random() * value.length)]; } return value; }; // this gets the request attributes and save the localize function inside // it to be used in a handler by calling requestAttributes.t(STRING_ID, [args...]) const attributes = handlerInput.attributesManager.getRequestAttributes(); attributes.t = function translate(...args) { return localizationClient.localize(...args); } }
export function Players({ children }) { const { t } = useTranslation(); const classes = useStyles(); return ( <Paper square={true} elevation={1} className={classes.root}> <Typography className={classes.title} variant="h6"><PeopleIcon /> {t('Players')}</Typography> <List dense>{children}</List> </Paper> ); }
describe('i18n', () => { it('should initate i18n', async () => { const t = await i18n; expect(t).toBeDefined(); }); it('should initate i18n with translations', async () => { const t = await i18n; expect( t(translations.feedbackFeature.description()).length, ).toBeGreaterThan(0); }); });
const TranslatedHello=()=>{ const { t } = useTranslation(); return( <div> <p>{t('welcome','ahoy hoy')}</p> </div> ) }
const Intro = () => { const classes = useStyles() const { t } = useTranslation() return ( <div className={classes.root}> <Container className={classes.col} maxWidth="md"> <Alert severity="info"> <AlertTitle>{t("index.betaTitle")}</AlertTitle> {t("index.betaMessage")} </Alert> <h2>{t("index.indexTitle")}</h2> <p>{t("index.introduction")}</p> <p>{t("index.steps")}</p> <StepperSteps /> </Container> </div> ) }
function Message(props) { const { t } = useTranslation(); const localizedMessage = t(`Message.${Status.getCodeTranslationKey(props.messageCode)}`); return ( <Snackbar open={props.ifShowMessage} autoHideDuration={props.ifMessageIsError ? 3000 : 1000} onClose={props.handleClose} > <Alert severity={props.ifMessageIsError ? 'error' : 'success'}> {localizedMessage} </Alert> </Snackbar> ); }
process(handlerInput) { const localisationClient = i18n.init({ lng: Alexa.getLocale(handlerInput.requestEnvelope), resources: languageStrings, returnObjects: true }); localisationClient.localise = function localise() { const args = arguments; const value = i18n.t(...args); if (Array.isArray(value)) { return value[Math.floor(Math.random() * value.length)]; } return value; }; handlerInput.t = function translate(...args) { return localisationClient.localise(...args); } }
export default function StepperSteps() { const { t } = useTranslation() return ( <Breadcrumbs separator={<NavigateNextIcon fontSize="large" />} aria-label="breadcrumb" > <Typography color="textPrimary">{t("index.step1")}</Typography> <Typography color="textPrimary">{t("index.step2")}</Typography> <Typography color="textPrimary">{t("index.step3")}</Typography> </Breadcrumbs> ) }
// page uses the hook function Page() { const { t, i18n } = useTranslation(); const changeLanguage = lng => { i18n.changeLanguage(lng); }; return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <Welcome /> <button onClick={() => changeLanguage('es')}>es</button> <button onClick={() => changeLanguage('en')}>en</button> </div> <div className="App-intro"> <MyComponent /> </div> <div>{t('description.part2')}</div> </div> ); }
export function ChallengeButton({ onChallenge, challenging, enabled }) { const { t } = useTranslation(); return ( <LoadingButton variant="contained" color="primary" disabled={!enabled || challenging} loading={challenging} onClick={onChallenge} > {t("Challenge")} </LoadingButton> ); }
const TranslationWithHook = () => { const { t } = useTranslation(INSIGHT_PROTOTYPE); return ( <p> <div>Translation using react hook</div> <div>{t('welcome')}</div> </p> ); }
describe('i18n', () => { it('should initate i18n', async () => { const t = await i18n; expect(t).toBeDefined(); }); it('should initate i18n with translations', async () => { const t = await i18n; expect( t(translations.feedbackFeature.description()).length, ).toBeGreaterThan(0); }); });
const TranslatedCat = () => { const { t } = useTranslation(); return( <div> <p>{t('cat','meoww')}</p> </div> ) }
const TranslatedDog=()=>{ const { t } = useTranslation(); return( <div> <p>{t('dog','woof')}</p> </div> ) }