i18next

component.js

import React from 'react'

import { useT } from './hook.js'

const Comp = () => {
  const { t, tDate, tTime, tDateTime, tCurrency } = useT()

  const myDate = '1993-05-07T17:30:00z'
  const myCurrency = 100
  
  return (
    <ul>
      <li>{t('global_datetime_formatter', { date: myDate })}</li> {/* 07/05/1993 17:30:00 */}
      <li>{t('global_currency_formatter', { value: myCurrency })}</li> {/* R$ 100,00 */}
      <li>{tDate(myDate)}</li> {/* 07/05/1993 */}
      <li>{tTime(myDate)}</li> {/* 17:30:00 */}
      <li>{tDateTime(myDate)}</li> {/* 07/05/1993 17:30:00 */}
      <li>{tCurrency(myCurrency)}</li> {/* R$ 100,00 */}
    </ul>
  )
}

hook.js

import { useTranslation } from 'react-i18next'

export const useT = (namespace) => {
  const { t, ...rest } = useTranslation(namespace)

  const tDate = (date) => t('global_date_formatter', { date })
  const tTime = (date) => t('global_time_formatter', { date })
  const tDateTime = (date) => t('global_datetime_formatter', { date })

  const tCurrency = (value, format = 'global_currency_formatter') => t(value, { date })
  
  return {
    t,
    tDate,
    tTime,
    tCurrency,
    ...rest
  }
}

i18next.js

import i18n from 'i18next'
import Backend from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { reactI18nextModule } from 'react-i18next'

import dateFnsFormat from 'date-fns/format'

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-backend
  .use(Backend)

  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)

  // pass the i18n instance to react-i18next.
  // .use(initReactI18n)
  .use(reactI18nextModule)

  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: false,
    fallbackLng: 'pt-BR',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
      format: (value, format, lang) => {
        if (!value || value === '' || value === undefined || value === null) {
          return ''
        }

        // format = date|dd/MM/yyyy HH:mm:ss
        // type = date
        // mask = dd/MM/yyyy HH:mm:ss

        // format = currency|BRL
        // type = currency
        // mask = BRL

        const [type, mask] = format.split('|')

        if (type === 'date') {
          return dateFnsFormat(value, mask)
        }

        if (type === 'currency') {
          return (new Intl.NumberFormat(lang, {
            style: 'currency',
            currency: mask,
            currencyDisplay: 'code'
          }))
          .format(value)
          .replace(mask, '')
          .replace(' ', '')
          .replace(' ', '')
          .trim()
        }

        return value
      }
    }
  })

export default i18n

pt-BR.json

{
  "global_currency": "R$",
  "global_currency_formatter": "$t(global_currency) {{value, currency|BRL}}",
  "global_date_formatter": "{{date, date|dd/MM/yyyy}}",
  "global_datetime_formatter": "{{date, date|dd/MM/yyyy HH:mm:ss}}",
}