@cognam/change-language v1.0.0

🌐 ChangeLanguage React Component

A fully customizable, reusable language switcher for React apps using react-i18next and Material-UI. It provides a clean dropdown with flags and localized language names, and automatically syncs with i18next.

📦 Installation

npm install @cognam/change-language

## ✅ Requirements

Ensure your project has the following **peer dependencies** installed:

```bash
npm install react react-dom @mui/material @emotion/react @emotion/styled react-i18next i18next

Minimum supported versions:

• React: ^17.0.0 || ^18.0.0
• MUI: ^5.0.0
• i18next: ^20.0.0
• react-i18next: ^11.0.0

🚀 Usage

import React from 'react';
import ChangeLanguage from '@cognam/change-language';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <ChangeLanguage />
    </div>
  );
}

📝 Note: Ensure i18next is configured and initialized in your application context.

🎛️ Props

🖼️ Image Handling

The component expects flag images in the following path and structure:

/images/Flags/
  ├── USA.webp
  ├── mexico.webp
  └── default.webp

Tips:

• Place the images in public/images/Flags/ for CRA or Vite apps.
• Make image paths configurable via props (future enhancement).
• A fallback to default.webp is automatically handled on error.

🧠 LocalStorage Use

The selected language is persisted using localStorage under the key:

i18nextLng

This ensures the selected language is retained after page reloads.