[RFC] Add `useScopedT` hook about next-international HOT 10 CLOSED

I agree that this pattern const { scopedT } = ... const t = ... often repeats (e.g in every pages on this project: https://github.com/lagonapp/lagon/blob/02fe4e40e487c851fbf0fa6dfbd866c3726f0b76/packages/website/pages/index.tsx#L17)

The current API looks like this:

const { t, scopedT } = useI18n() // non-scoped t
const t = scopedT('scope') // scoped t

If you only want to have a scoped t, you currently have to write two lines, and that can be shorten. We have multiple solutions for this:

1. useI18n only returns a non-scoped t function, we introduce a new useScopedI18n hook that takes the scope in parameters, similar to the current scopedT:

const t = useI18n() // non-scoped t
const t = useScopedI18n("scope") // scoped t

2. useI18n can return both non-scoped or scoped t functions, based on if we add a scope in the parameters.

const t = useI18n() // non-scoped t
const t = useI18n("scope") // scoped t

The second solution is "cleaner" but might be harder to type correctly. What do you think?

from next-international.

Either solution would be a breaking change, but I don't think it's bad because it improves the DX while preparing for the v1. Feel free to submit a PR!

from next-international.

I agree that this pattern const { scopedT } = ... const t = ... often repeats (e.g in every pages on this project: lagonapp/lagon@02fe4e4/packages/website/pages/index.tsx#L17)

The current API looks like this:

const { t, scopedT } = useI18n() // non-scoped t
const t = scopedT('scope') // scoped t

If you only want to have a scoped t, you currently have to write two lines, and that can be shorten. We have multiple solutions for this:

1. useI18n only returns a non-scoped t function, we introduce a new useScopedI18n hook that takes the scope in parameters, similar to the current scopedT:

const t = useI18n() // non-scoped t
const t = useScopedI18n("scope") // scoped t

2. useI18n can return both non-scoped or scoped t functions, based on if we add a scope in the parameters.

const t = useI18n() // non-scoped t
const t = useI18n("scope") // scoped t

The second solution is "cleaner" but might be harder to type correctly. What do you think?

I actually like both solutions. I think the second one should be easy to type with a function overload tbh. But It might be confusing to some people that adding a param changes the return type of a function. Maybe we could do both?

from next-international.

But It might be confusing to some people that adding a param changes the return type of a function.

Strongly agree with this, but still not sure what the best is for the DX:
The first one is more explicit - you know that it's a scoped translation, but you have to import a different hook.
The second one can be a bit "magical" as the type change if we add a scope or not, which might not be obvious at first, but is easier to use since it's the same hook.

from next-international.

Also, if you need both t and scopedT in a component, you can't write:

const { t, scopedT } = useI18n()
const t = scopedT('scope')

Because t is already declared.

So, the first suggestion is 🔥

Can I create a PR for this?

from next-international.

Oh, it would be a breaking change though

from next-international.

Can we release this? Or do we have anything else to add before?

from next-international.

I would like to release this along with Next.13 app directory support. Is the new scoped feature urgent for you?

from next-international.

I'm just implementing next-international in my project right now and would like to start off on a good basis. But I'll fork the project for now, that's okay! 👍

from next-international.

Closing this issue as this feature has been released in 0.4.0

from next-international.