Using multiple transifex projects in react app -

We have several projects.

  1. A storybook as a component library.
  2. A platform app - our main app.
  3. A user portal - another side app.
  4. A React native app.

Current set-up:
We are using transifex/native with transifex/react.
We have created separate projects in transifex for all the above.

Issue:
Our main platform app uses the storybook. But we can only init the transifex with one token and that is of this main app. So, our storybook components are not able to set-up the right token - as their token is of a separate project for it’s own storybook.

Solutions.

  1. I believe we should just have a single project on transifex for translation and use that across all apps.
  2. However, is there any way to solve this without giving up different projects in transifex?

Summary:
App1 uses Storybook1 and we have separate projects of them in transifex.
We want to somehow access both App1 and Storybook1 resources in App1 project.

Let me know.

Thanks.

Post comments:
Why we are not using a single project:
We are using the purge feature - which removes any translation which is not present in the App1 when you push changes.
So, if we use a single project then we can’t use it anymore because the other translations are in the storybook. And when we use the push feature on the storybook then it will remove all the translations which are not on the storybook but front-end.
And we want to use purge because otherwise when we are going to add another language then we will be translating many unnecessary strings.

So, we got to find a way to use two transifex projects within one app.
Please help. Thanks.

3 Likes

Hello @Saad_Awan,

I completely understand your point. As it stands now, though, using multiple API tokens in the same React app runtime will not work. It could, but the SDK will need to be updated. So, for now, the best option is to use a single resource for all of them. However, we have created a story to investigate this further because it makes sense to make it possible.

If you do not wish to wait, then there is the option to implement this functionality yourself, as Transifex Native wasa developed as an open source project so that more people can contribute or expand the solution. We have also setup a Native specifications document as a blueprint for building a Transifex Native SDK on new frameworks.

Does this help? I also want to thank you for bringing this to our attention, as it does make sense.

Regards,
Ryan
Transifex Customer Support

Hi,

I’m happy to report that this request has received enough attention that it will be implemented fairly soon, actually. So, please stay tuned… we’ll let you know when this ‘feature’ is available.

Regards,
Ryan
Transifex Customer Support

Hello @Saad_Awan, our team released version 2.3.0 of both @transifex/native and @transifex/react, that hopefully will cover what you are looking for.

We have added support for using multiple “tx” instances, that you can initiate with different API keys (thus multiple projects in Transifex) and added a React Provider, to be able to pass the different native instance down the road on your components.

You can take a look on the example of the Github page and tell us if it suits your use case. We can elaborate more on how it works if it is not clear enough:

Cheers,
Nikos Vasileiou
Transifex CTO

3 Likes

Thanks :pray: :heart:
I am going to work on it tomorrow and will keep you posted. Thanks alot.

@Nikos_Vasileiou
Just tried it. It’s not working for me.

Behaviour:
the useT is not working at all for main and other sub instances and return empty string.
The T is working good for the main instance, but not for sub instance and just return the string un-translated.

Please let me know if you can reproduce this by urself, otherwise, I will leave the reproduction link here.

Ps. It would be great if you can reproduce it urself. Thanks.

FYI: Also created the issue on github: @transifex/react@2.3.0 useT not working. · Issue #110 · transifex/transifex-javascript · GitHub

@Ryan @Nikos_Vasileiou

UPADTE:
I got the solution on github. CLOSED.

Thanks.

3 Likes