Unclear readme for React integration

[timsun28]

Hi,

I'm currently switching from TAPi18n to an alternative for managing translations, and found your package. I am currently running an app that is in a slow transition from Blaze to React so I would need to support for both right now. I got the blaze integration working without any problems, but I seem to have some problems with the React integration.

When I copy over the example code from the readme, I got the message that useState and useEffect aren't found and need to be imported. It would be useful if those were already imported in the example as well.

The second issue I was having is that within the LocaleProvider function, it can't seem to find variable: localContext that is created outside the function. I found that this was because I was putting my code in a .ts file instead of .tsx file. I think it would be good to mention this.

What I can't figure out is why the LocaleProvider is there if it's not being used? The useLocale() function returns the localeContext but, what am I supposed to do with the LocaleProvider? I read on the internet that a context should usually be wrapped around the app, so all child elements can access its values, but I'm not sure if this is needed.

I hope someone can elaborate on this and make it more clear for me what this code does exactly. I would be happy to create a pull request with additional explanation in the readme, when I understand the code. I think it might also be a good addition to add a small Meteor/react example project to showcase a proper/all implementations for this package.

Thank you in advance, Timo

[piotrpospiech]

Hi @timsun28,

1. I will add useState and useEffect to the example
2. If you use React with TypeScript and you use JSX syntax in a file, you need to name it with .tsx extension. I will also improve documentation to be more user-friendly and be able to just copy-paste without any errors.
3. LocaleProvider should wrap components where you use useLocale() or useTranslator(). Here is an example:

const Example = () => {
  const t = useTranslator();
  return (
    <>
      Are you sure?
      <Button>{t("common.yes")}</Button>
      <Button>{t("common.no")}</Button>
      <CompanyField placeholder={t("forms.company.placeholder")} />
    </>
  );
};

const ExampleWrapper = () => (
  <LocaleProvider>
    <Example />
  </LocaleProvider>
);

export default ExampleWrapper;

You can add LocaleProvider as a root component wrapper. Without adding this provider, the locale won't be reactive, and you can have issues with changing language.

4. We are working on preparing some example projects for different scenarios now to improve our documentation.

[timsun28]

Hi,

Thank you for your clear response. Because I'm creating React components inside Blaze templates at the moment, it's going to be a bit tricky to wrap all the components in the LocalProvider, but I will keep it in mind for when I finish the transition from Blaze to React.

Thank you