language-switcher2/src/components/LanguageProvider.js

A lightweight, reusable React package for adding multilingual support to your applications. This package uses `react-i18next` for translation management and provides a context provider for easy state management and language switching.

import React, { createContext, useState, useEffect, useContext } from 'react';
import { loadTranslations } from '../utils/loadTranslations';
import i18n from '../i18n';

const LanguageContext = createContext();

export const LanguageProvider = ({ children, translations }) => {
  const [language, setLanguage] = useState(i18n.language || 'en');

  useEffect(() => {
    if (translations) {
      loadTranslations(translations).catch((err) =>
        console.error('Error loading translations:', err)
      );
    }
  }, [translations]);

  const changeLanguage = (lang) => {
    setLanguage(lang);
    i18n.changeLanguage(lang);
  };

  return (
    <LanguageContext.Provider value={{ language, changeLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

export const useLanguage = () => useContext(LanguageContext);