How to use i18next as a peer dependency for my component library?

Question

I am building a React component library which contains some translations, but I want these translations to be provided by the user of my package.

The reason for this is that these translations should be customizable, and I don't want to include every possible language in this package.

So what I'd like to achieve is to use useTranslations inside my component library like this:

import React from 'react';
import { useTranslation } from 'react-i18next';

const MyComponent = () => {
    const { t } = useTranslation();

    return <div>{t('helloWorld')}</div>;
};

And somehow the 'helloWorld' translations should be configurable by the user of the library.

Is there any way to achieve this?

Answer 1

Apparently this was caused by yarn link using two versions of react-i18next.

To solve this I've configured my app to use the react-i18next version of my package:

cd my-package/node_modules/react-i18next
yarn link

cd my-app
yarn link react-i18next

Now my package uses the i18next instance configured in my app.