The Easiest Static Internationalization for React and Next.js

Features

Common internationalizations package have a problem, they are built with dynamic websites in mind.

• Multi-Language Support 🎯
  Supports both single and multiple languages with easy configuration for updates.
• Local Storage for User Preferences 🗳️
  Stores the user’s language preference in localStorage for persistence across sessions.
• No Extra Server Configuration 🙅🏻
  Ideal for SPAs with zero need for additional server setup or configurations.
• Easy Setup & Fast Deployment 🚀
  Quick to install and configure, ready to use in minutes.
• Built with TypeScript 🔓
  Fully typed with TypeScript for enhanced development experience and type safety.

What does it look like?

// page.tsx
import { useLanguage, LangProvider } from 'react-intl-lil';
import { langConfig } from '@/config';

export default function Home() {
  const { gs, ga } = useLanguage();
  const ver = '1.1.2';

  return (
  <>
    <LangProvider langConfig={langConfig}>
      <h1>{gs('home.title')}</h1>
      <p>{gs('home.version', { version: ver })}</p>
      <ul>
        {ga('home.features').map((item) => (
          <li key={item.title}>
            <h2>{item.title}</h2>
            <p>{item.data}</p>
          </li>
        ))}
      </ul>
    </LangProvider>
  );
}

// en.ts
const data = {
  home: {
    title: 'Welcome to react-intl-lil',
    version: 'Current version: {{version}}',
    features:[
      {title:"Multi language", data:"Single and multi language support"}
      {title:"Local Storage", data:"For persistence across sessions"}
    ]
  },
};

Docs and demos

Just remember the guides themselves are the demos, source code available.

• Next js
• React

Donations

This package takes time and effort to maintain, and frequent blackouts in my country make it harder. Your support would help keep development going.

• Buy me a coffee

Every contribution helps bring light to the project!