react-i18next-loader

Usage

// App.i18n
{
  "message": {
    "text": {
      "en": "Field",
      "de": "Feld"
    }
  }
}

// App.jsx
import React from 'react'
import { useTranslation } from './App.i18n'

export const App = () => {
  const { t } = useTranslation()
  return (
    <div>{t('message.text')}</div>
  )
}

Configuration

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.i18n$/,
        use: [{ loader: '@choffmeister/react-i18next-loader' }],
      },
    ],
  },
}

// lib.d.ts
declare module '*.i18n' {
  import { UseTranslationResponse } from 'react-i18next'
  export const namespace: string
  export const translations: any
  export const useTranslation: () => UseTranslationResponse
}