Export return type of useTranslations

[converter-user-old]

Is your feature request related to a problem? Please describe.

Export the return type of useTranslations as a interface or type so i can use it as a function parameter type

Describe the solution you'd like

Export the return type

interface useTranslationsProps {
    (key: string, values?: Record<string, string | number | boolean | Date | null | undefined> | undefined, formats?: Partial<Formats> | undefined): string;
    rich: (key: string, values?: Record<string, string | number | boolean | Date | ((children: ReactNode) => ReactNode) | null | undefined> | undefined, formats?: Partial<Formats> | undefined) => string | ReactElement | ReactNodeArray;
    raw(key: string): any;
}

[amannn]

Hi @ruessej,

that might be doable but I'd like to learn a bit more about your use case. At least based on my experience with next-intl I only needed the translation function in the component where it was read from a hook. I'm not sure why you'd need to pass it around to other functions, since it's closely related to the rendering code of a component.

Can you help me understand the situation a bit better?

[converter-user-old]

Hi @amannn,

I use Mantine Spotlight (it's a command palette) and a navigation bar to navigate through the pages. And to not duplicate the code, I use an array to store the pages and their titles.

export const pages = (translationIndex: useTranslationsProps) =>
[
      {
        title: translationIndex("Home"),
        url: "/",
      },
      {
        title: translationIndex("AboutUs"),
        url: "/aboutus",
      },
]

[amannn]

Hmm, I see. I'd say the tricky thing here is that the translation function you're passing around has an implicitly hidden namespace. It's really meant as something that should be used in the local scope of a component for that reason.

I think my recommendation would be to create the pages object in a central place in your app and to pass it down to SpotlightProvider and your navigation bar. Then you can use the translation function in the same file where the namespace is defined and you don't have to pass it.

Btw. in your case I guess you could type translationIndex as (key: string) => string if you don't use any advanced features.

[converter-user-old]

Okay i think i will use a context or something for the pages thank you for the idea.

But i think i would still be nice to have a interface. (Because I think it looks cleaner than this big type def)

[amannn]

Sure, you're welcome! The reason why I'm asking these questions is because I'd like to understand better how the APIs exposed by next-intl are used. When we can make certain assumptions about its usage it opens the door for potential automatic optimizations. That's why if there's at least an equally viable alternative I'd suggest to stick to that.

[amannn]

I've recently worked on #90 and this involves making the type of the translate function quite a bit more complex (see #93). Therefore at least as long as there is another way to achieve your goal, I'd close this ticket as it doesn't seem viable to export something useful here for the time being. I hope this is ok for you!