Пожалуйста, дайте мне идею написать такую библиотеку, как react-i18next

---

Я использую библиотеку react-i18next. Я хочу написать такую библиотеку. Но я не понимаю, как он это делает. Я просто оборачиваю свои компоненты компонентом более высокого порядка (HOC) withTranslation() и создаю экземпляр i18n в каталоге. Затем я могу импортировать экземпляр i18n в любое место, и всякий раз, когда экземпляр i18n вызывает changeLanguage (), компоненты, связанные withStranslation (), автоматически перерисовываются.

Я могу использовать react HOC, context, hook, но я не знаю, как они реализуют такую библиотеку.

Я оборачиваю свой компонент с помощью withTranslation() HOC:

import {withTranslation} from 'react-i18next';

// Declare class component
class HomeTabNavigator extends React.Component {...}

// Wrap with HOC
export default withTranslation(HomeTabNavigator)

Я экспортирую экземпляр i18n из i18n/index.js, это мое содержание:

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import en from './locales/en/translation.json';
import vi from './locales/vi/translation.json';

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: (cb) => cb('en'),
  init: () => {},
  cacheUserLanguage: () => {},
};

i18n
  .use(languageDetector)
  .use(initReactI18next) // pass the i18n instance to react-i18next.
  .init({
    resources: {
      en: {
        commonNameSpace: en,
      },
      vi: {
        commonNameSpace: vi,
      },
    },
    lng: 'en',
    fallbackLng: 'en', // use en if detected lng is not available
    debug: true,
    keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: {
      escapeValue: false, // react already safes from xss so it's not needed for react as it escapes by default
    },
    defaultNS: 'commonNameSpace',
    fallbackNS: ['commonNameSpace'],
  });

export default i18n;

И тогда я могу импортировать экземпляр с названием i18n в любом месте с помощью импорта с названием i18n '../../реализация i18n';
Всякий раз, когда мой экземпляр i18n вызывает функцию i18n.changeLanguage (), мои компоненты обновляются

import i18n from '../../i18n'; // By import here, i18n is existing when bundle,

// Use:
i18n.changeLanguage('en')

Пожалуйста, научи меня, как это сделать. Спасибо!!!

Что я уже пробовал:

Я понятия не имею, как это сделать. Я пробовала реагировать по обстоятельствам, контексту, но я не знаю как реализовать

---