-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
DX: hook function returning translations with given key prefix #1359
Comments
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 |
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. |
@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 |
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. |
I think yes - and should not add too much complexity as it can be added with a few lines in the mentioned function |
@jamuhl, @adrai I am looking for some guidance about the API we want to achieve with this PR. You both mentioned changing
Is that what you are suggesting? My intention would rather be something along the lines of:
so that provided key prefix is automatically applied to Wdyt? |
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'); |
or you will have to pass that option here to getFixedT https://github.com/i18next/react-i18next/blob/master/src/useTranslation.js#L43 |
@jamuhl , @adrai thank you for your help. I've submitted PR with When that get's merged I can work on updating |
Thanks for review & merge @adrai . I'll submit PRs for react hook and docs update soon |
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. |
@mdjastrzebski I already tried to document it here: https://www.i18next.com/overview/api#getfixedt |
@adrai the docs looks good 馃憤馃徎 |
Added PR for updating |
Thank you @mdjastrzebski for your contribution. v11.12.0 has just been released. |
So in your original example @mdjastrzebski we can now go:
|
nope. this does not work:
|
seems to work as expected: react-i18next/test/useTranslation.spec.js Line 121 in e6cb106
@tibistibi if you think there is an issue, please provide a reproducible example codesandbox or similar |
馃殌 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 returnstRoot
function which is regular, un-scopedt
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:
useTranslation
hook.t
function and returns a prefixed version of it.Example
instead of
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.The text was updated successfully, but these errors were encountered: