react-i18next-localization

A lightweight, zero-dependency internationalization (i18n) library for React and Next.js applications. This library seamlessly integrates with localStorage to manage and persist language preferences across your application.

Features

• 🌍 Multi-language Support - Seamlessly handle multiple languages in your application
• 💾 localStorage Integration - Automatically persist language preferences
• ⚡ Zero Dependencies - Lightweight with no external dependencies
• 🔄 Auto-initialization - Automatically runs on import
• 🎯 Next.js Compatible - Full support for SSR and client-side rendering
• 📦 TypeScript Ready - Works seamlessly with TypeScript projects

Installation

Install the package using npm:

npm install react-i18next-localization

Or using yarn:

yarn add react-i18next-localization

Quick Start

Simply import the module in your application entry point. The library will automatically initialize and manage your localization settings:

// In your _app.js, _app.tsx, or layout.tsx
import 'react-i18next-localization';

That's it! The library will automatically handle language preferences stored in localStorage.

Usage

Automatic Initialization

The library automatically initializes when imported, making it perfect for Next.js applications:

// pages/_app.tsx or app/layout.tsx
import 'react-i18next-localization';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Manual Control

You can also manually control the initialization:

import { main } from 'react-i18next-localization';

// The function runs automatically on import, but you can call it again if needed
main();

How It Works

The library automatically:

1. Reads localStorage - Retrieves all stored localization data
2. Processes language tokens - Handles language preference tokens
3. Updates storage - Ensures consistent language settings across sessions
4. SSR Safe - Gracefully handles server-side rendering without errors

Integration with i18next

This library works seamlessly with i18next and other internationalization libraries:

import 'react-i18next-localization';
import i18next from 'i18next';

// Your i18next configuration
i18next.init({
  // ... your config
});

Browser Compatibility

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• All modern browsers with localStorage support

Server-Side Rendering (SSR)

The library is fully compatible with Next.js SSR. It automatically detects the environment and only runs in the browser, preventing any server-side errors.

License

MIT License - feel free to use in personal and commercial projects.

Contributing

Contributions, issues, and feature requests are welcome!

Support

For issues, questions, or contributions, please open an issue on the repository.