yoi18n

⚡Straightforward & less effort React i18n library.

Get to Know

• Installation
• Usage
  • JavaScript
  • TypeScript
  • React
• License

Installation

bun install yoi18n
npm install yoi18n
yarn add yoi18n
pnpm install yoi18n

Usage

Creates lang.json and lang-admin.json files:

lang.json :

{
  "en": {
    "hello": "hello world"
  },
  "de": {
    "hello": "Guten Morgen"
  },
  "id": {
    "hello": "Hallo bang"
  }
}

lang-admin.json :

{
  "en": {
    "hello": "hello world from admin"
  },
  "de": {
    "hello": "Guten Morgen from admin"
  },
  "id": {
    "hello": "Hallo bang from admin"
  }
}

JavaScript

// lang.js
const i18n = require('yoi18n')

const t = i18n.init({
  namespace: {
    default: {
      // user pages
      load: `/lang.json`,
      defaultLang: 'en',
    },
    admin: {
      // admin pages
      load: `/lang-admin.json`,
      defaultLang: 'en',
    },
  },
  detection: {
    order: ['cookie', 'path', 'query'], // use defaultLang if not found
    defaultLang: 'en',
  },
})

console.log(t('hello')) // "hello" from default namespace
console.log(t('admin.hello')) // "hello" from admin namespace,

// You can export for reusability
// module.exports = t;

TypeScript

// lang.ts
import i18n from 'yoi18n'

const t = i18n.init({
  namespace: {
    default: {
      // user pages
      load: `/lang.json`,
      defaultLang: 'en',
    },
    admin: {
      // admin pages
      load: `/lang-admin.json`,
      defaultLang: 'en',
    },
  },
  detection: {
    order: ['cookie', 'path', 'query'], // use defaultLang if not found
    defaultLang: 'en',
  },
})

console.log(t('hello')) // "hello" from default namespace
console.log(t('admin.hello')) // "hello" from admin namespace,

// You can export for reusability
// export default t;

React

import i18n from 'yoi18n'

const t = i18n.init({
  namespace: {
    default: {
      // user pages
      load: `/lang.json`,
      defaultLang: 'en',
    },
    admin: {
      // admin pages
      load: `/lang-admin.json`,
      defaultLang: 'en',
    },
  },
  detection: {
    order: ['cookie', 'path', 'query'], // use defaultLang if not found
    defaultLang: 'en',
  },
})

// Creates a function LanguageSwitch to change defaultLang
export default function LanguageSwitch({ lang, ns }) {
  // t.switch is to change the defaultLang
  return <div onClick={() => t.switch(lang, ns)}>Switch Language for {ns}</div>
}

;<LanguageSwitch lang='de' ns='default' />
;<LanguageSwitch lang='de' ns='admin' />

License

yoi18n is MIT Licensed and Open Source Software by @fzn0x