React & Vue Multi-Language Translation

This package provides a simple way to add multi-language support to your React and Vue applications. It features automatic language detection, simple configuration with JSON files for translations, and a customizable solution that keeps your app lightweight.

Features

• Automatic language detection.
• Simple configuration using JSON files for translations.
• Easy API to integrate into any React or Vue component.
• Support for dynamic content translation.
• Lightweight, customizable, and minimal bundle size.

Installation

To install the package, run the following command in your project directory:

npm install multi-language-translation

Quick Start

React Setup

1. Import the Package:

In your main React component (e.g., App.js), import the necessary components and wrap your app with LanguageProvider to enable language switching.

import React from 'react';
import { LanguageProvider, ReactTranslate, ReactLanguageSwitcher } from 'multi-language-translation';

const App = () => (
  <LanguageProvider>
    <ReactLanguageSwitcher /> {/* Language switcher */}
    <h1><ReactTranslate keyName="hello" /> {/* Dynamic translation based on selected language */}</h1>
  </LanguageProvider>
);

export default App;

2. Translations:

Ensure you have your translation files set up. For example:

• en.json:

{
  "hello": "Hello",
  "goodbye": "Goodbye"
}

• es.json:

{
  "hello": "Hola",
  "goodbye": "Adiós"
}

You can add additional language JSON files as needed.

Vue Setup

1. Import the Package:

In your main Vue component (e.g., App.vue), import and use the package components like so:

import Vue from 'vue';
import { VueTranslate, VueLanguageSwitcher, createVueI18n } from 'multi-language-translation';

const i18n = createVueI18n({
  en: { hello: 'Hello' },
  es: { hello: 'Hola' }
});

new Vue({
  i18n,
  components: { VueTranslate, VueLanguageSwitcher },
  template: `
    <div>
      <VueLanguageSwitcher /> <!-- Language switcher -->
      <h1><VueTranslate :keyName="'hello'" /></h1> <!-- Dynamic translation -->
    </div>
  `
}).$mount('#app');

2. Translations:

Just like in React, you need translation files. For example:

• en.json:

{
  "hello": "Hello",
  "goodbye": "Goodbye"
}

• es.json:

{
  "hello": "Hola",
  "goodbye": "Adiós"
}

Language Switching

Both React and Vue support language switching through the following components:

• ReactLanguageSwitcher: Provides a UI to switch between available languages in a React app.
• VueLanguageSwitcher: Provides a UI to switch between languages in a Vue app.

These components will allow users to toggle between languages, and the translations will update dynamically.

React Example

import { ReactTranslate, ReactLanguageSwitcher } from 'multi-language-translation';

const App = () => (
  <LanguageProvider>
    <ReactLanguageSwitcher />
    <h1><ReactTranslate keyName="hello" /></h1>
  </LanguageProvider>
);

Vue Example

import { VueTranslate, VueLanguageSwitcher } from 'multi-language-translation';

new Vue({
  i18n,
  components: { VueTranslate, VueLanguageSwitcher },
  template: `
    <div>
      <VueLanguageSwitcher />
      <h1><VueTranslate :keyName="'hello'" /></h1>
    </div>
  `,
}).$mount('#app');

Custom Translations

To add or modify translations, you can provide your own translation resources.

Example for React:

import { initI18n } from 'multi-language-translation/i18n';

const customTranslations = {
  en: { hello: 'Hello, User!' },
  es: { hello: '¡Hola, Usuario!' }
};

initI18n(customTranslations);  // Custom translations setup

Example for Vue:

import { createVueI18n } from 'multi-language-translation';

const customTranslations = {
  en: { hello: 'Hello, User!' },
  es: { hello: '¡Hola, Usuario!' }
};

const i18n = createVueI18n(customTranslations); // Custom translations setup

Custom Language Detection

If you want to use automatic language detection (e.g., based on the user's browser settings), you can configure it as follows:

For React:

import { LanguageProvider } from 'multi-language-translation';

const App = () => (
  <LanguageProvider autoDetectLanguage={true}>
    <ReactLanguageSwitcher />
    <h1><ReactTranslate keyName="hello" /></h1>
  </LanguageProvider>
);

For Vue:

import { createVueI18n } from 'multi-language-translation';

const i18n = createVueI18n({
  autoDetectLanguage: true, // Automatically detect the user's language
  en: { hello: 'Hello' },
  es: { hello: 'Hola' }
});

new Vue({
  i18n,
  components: { VueTranslate, VueLanguageSwitcher },
  template: `
    <div>
      <VueLanguageSwitcher />
      <h1><VueTranslate :keyName="'hello'" /></h1>
    </div>
  `,
}).$mount('#app');

Advanced Configuration

You can configure the translation provider to include fallback languages, modify language detection logic, and more.

For more advanced configuration options, refer to the API Documentation in the package's source code.

Package Structure

multi-language-translation
├── dist/                         # Compiled bundle files
│   └── bundle.js
├── src/
│   ├── index.js                  # Main entry point
│   ├── i18n.js                   # i18n initialization logic
│   ├── locales/                  # Translation JSON files
│   ├── components/               # React & Vue components
│   │   ├── ReactTranslate.js     # React translation component
│   │   ├── ReactLanguageSwitcher.js
│   │   ├── VueTranslate.vue      # Vue translation component
│   │   └── VueLanguageSwitcher.vue
├── babel.config.json             # Babel config
├── webpack.config.js             # Webpack config
├── package.json                  # Package metadata
├── .npmignore                    # Files to exclude from NPM package
└── README.md                     # Documentation

Contributing

If you'd like to contribute to this package, please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/new-feature).
3. Commit your changes (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature/new-feature).
5. Create a new pull request.

License

This package is open-source and released under the MIT License.

Conclusion

This package provides a simple and flexible solution for adding multi-language support to your React and Vue applications. It is designed to be lightweight and easy to use, with a clear API for integrating translations into your components.

Is README file mein installation se lekar usage aur configuration tak sab cover hai. Agar tumhe koi aur specific detail chahiye ho ya changes chahiye ho, toh mujhe batao!