Added possibility to use useTranlation returning Array or Object

[adrai]

Added possibility to use useTranlation not only expecting an array but also an object. Should help #712

[coveralls]

Coverage decreased (-0.7%) to 70.556% when pulling cbea832 on adrai:master into 8dc2a10 on i18next:master.

[jamuhl]

@kachkaev opinions about letting users choose? we could provide both options

[kachkaev]

What if there is const i18n = useI18n()? as an alternative? It can be used as const { t } = useI18n()iftis bound toi18ncorrectly (no issues withthis`)? The original hook can be marked as deprecated over time if it’s perceived as a less convenient one.

[jamuhl]

@kachkaev i want to avoid another hook. As 95% of the times you like to get some t function based on a given namespace i think this is prefered

const { t } = useTranslation('ns1');
const [t] = useTranslation('ns1');

The only case you like to get the i18n instance is where you need current language or like to access the changeLanguage function. Chances are high you need t function in this component too.

So your approach would be:

const i18n = useI18n();
const { t } = i18n;

while you could just:

const { t, i18n } = useTranslation();

Beside that what we do for HOC and render prop? withI18n?!?

function Extended({ i18n }) {
   const { t } = i18n; 
}

[kachkaev]

Oh, I did not realise that JavaScript would allow us to return something that's both an array and an object! In this case, keeping just useTranslation makes perfect sense!

[adrai]

Yes, JavaScript allows to extend arrays.
With this PR you can now choose to do:
const [ t, i18n ] = useTranslation();
or
const { t, i18n } = useTranslation();

[kachkaev]

@jamuhl WDYT of updating docs too and encourage users to stick with { t, i18n }? The array can still be still supported for BC, but this will be a 'hidden feature'.

[rosskevin]

@jamuhl WDYT of updating docs too and encourage users to stick with { t, i18n }? The array can still be still supported for BC, but this will be a 'hidden feature'.

I have added explicit TS tests for both usages, and I agree that the object usage should be promoted as the default (my commit reflects that) especially for js users not using types.

[rosskevin]

Very interesting - learned something new about the TS response today! I think object use should be our default.

[jamuhl]

@rosskevin @kachkaev @adrai yes...i will update the docs / samples in favor to using object spread const { t, i18n } = useTranslation();

[jamuhl]

published in [email protected]

[jamuhl]

https://react.i18next.com/latest/usetranslation-hook and all the other places in the docs should reflect this change