reactjsreact-intl

React-intl with a custom react components library

I'm having a hard time to create a react library that supports translations. Let's say I have this structure

components
|- Button1
    |- Button1.tsx
    |- index.ts
|- Button2
    |- Button2.tsx
    |- index.ts
lang
|- en.json

what I want is, when my library is imported it already has translations. The problem is I need to add IntlProvider into each component. What's more I cannot use useIntl hook in the same component where I use IntlProvider. The only possible way is to add HOC to each component. Is there's a more slick way of doing that?

Solution

  • I got an answer on github. Basically the whole flow should be changed by using appropriate CLI commands from format.js (extract and compile).