DX: hook function returning translations with given key prefix

[mdjastrzebski]

🚀 Feature Proposal

const { t, tRoot} = useTranslationWithPrefix(keyPrefix: string)

Usage:
t('userModule.homeScreen.settingsSection.entry') -> t('entry')

Hook function that provides t function scoped to given translation key prefix, so that usage of translation strings with repeating prefix is simplified. Hook additionally returns tRoot function which is regular, un-scoped t function for cases when component needs to use some general purpose string.

Motivation

In React projects I've worked on, we've repeatedly found this kind of function useful, as given component usually uses the same translation key prefix, which occasionally tends to get quite long. This function improves the developer experience by reducing copy-pasting of repeating key prefixes and reduces effect of spelling mistakes in long keys, that may be hard to spot.

Alternatives achieving the same goal:

• key prefix could be passed as an option to regular useTranslation hook.
• function that wraps regular t function and returns a prefixed version of it.

Example

const { t, tRoot} = useTranslationWithPrefix('user.accountSettings.changePassword')

// Later
<h1>{t('title')}</h1>
<label>{t('label.newPassword')}</label>
<label>{t('label.repeatPassword')}</label>
<button>{tRoot('common.ok')}</button>

instead of

const { t } = useTranslation()

// Later
<h1>{t('user.acoountSettings.changePasaword.title')}</h1>
<label>{t('user.accountSetinngs.changePassword.label.newPassword')}</label>
<label>{t('user.acconutSettings.changePassword.lable.repeatPassword')}</label>
<button>{t('common.ok')}</button>

I'm looking for your feedback, whether you consider this a worthy addition to react-i18next API or whether you can already achieve this is some other way.

[adrai]

Personally, I never had such a need.

But if this is something the community would like to use, I would suggest to solve it with some extra options for the i18n.getFixed function...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jamuhl]

@mdjastrzebski do you like to provide a PR? should be very simple by appending a prefix passed in options to key here: https://github.com/i18next/i18next/blob/master/src/i18next.js#L325

[mdjastrzebski]

I am wondering if others find this feature any useful, like I did.

@jamuhl do you think it's worth adding to i18next API? If yes, then I would try submit a PR upcoming week.

[jamuhl]

I think yes - and should not add too much complexity as it can be added with a few lines in the mentioned function

[mdjastrzebski]

@jamuhl, @adrai I am looking for some guidance about the API we want to achieve with this PR.

You both mentioned changing i18n.getFixedT in i18next package. If I understand your suggestion correctly this would result in following API usage:

const TRANSLATION_PREFIX = 'user.accountSettings.changePassword'
const { t } = useTranslation();
const title = t('title', { keyPrefix: TRANSLATION_PREFIX });

Is that what you are suggesting?

My intention would rather be something along the lines of:

const { t } = useTranslation({ keyPrefix: 'user.accountSettings.changePassword' });
const title = t('title');

so that provided key prefix is automatically applied to t function and developer just passes the relevant suffix.

Wdyt?

[adrai]

no... it would look like this:

const { i18n } = useTranslation();
const t = i18n.getFixedT(null, null, 'user.accountSettings.changePassword')
// or
// const t = i18n.getFixedT({ keyPrefix: 'user.accountSettings.changePassword' })
const title = t('title');

[jamuhl]

or const { t } = useTranslation(null, { keyPrefix: 'user.accountSettings.changePassword' })

you will have to pass that option here to getFixedT https://github.com/i18next/react-i18next/blob/master/src/useTranslation.js#L43

[mdjastrzebski]

@jamuhl , @adrai thank you for your help.

I've submitted PR with getFixedT change to i18next: i18next/i18next#1644

When that get's merged I can work on updating useTranslation hook in this repo.

[mdjastrzebski]

Thanks for review & merge @adrai . I'll submit PRs for react hook and docs update soon

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[adrai]

@mdjastrzebski I already tried to document it here: https://www.i18next.com/overview/api#getfixedt

[mdjastrzebski]

@adrai the docs looks good 👍🏻

[mdjastrzebski]

Added PR for updating useTranslation hook in React i18next package #1371

[adrai]

Thank you @mdjastrzebski for your contribution. v11.12.0 has just been released.
And here some docs: https://react.i18next.com/latest/usetranslation-hook#optional-keyprefix-option

[minlare]

So in your original example @mdjastrzebski we can now go:

const { t, i18n: { t: tRoot }} = useTranslation('translation', { keyPrefix: 'very.deeply.nested' });
const scopedText = t('key');
const rootText = tRoot('key');

[tibistibi]

nope. this does not work:

const { t } = useTranslation('nl', { keyPrefix: 'TrainTripTable' });

will give me the key as translatione: TrainTripTable.column1

this does translate:

    const { i18n } = useTranslation();
const t = i18n.getFixedT(null, null, 'TrainTripTable');

[adrai]

nope. this does not work:

const { t } = useTranslation('nl', { keyPrefix: 'TrainTripTable' });



will give me the key as translatione: TrainTripTable.column1



this does translate:



    const { i18n } = useTranslation();

const t = i18n.getFixedT(null, null, 'TrainTripTable');

seems to work as expected:

react-i18next/test/useTranslation.spec.js

Line 121 in e6cb106

it('should apply keyPrefix and reset it once changed', () => {

@tibistibi if you think there is an issue, please provide a reproducible example codesandbox or similar