Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/fakundo/react-localized below:

fakundo/react-localized: Internationalization for React and Preact components based on gettext format

Complete internationalization tool for React and Preact components.

Features:

• based on gettext format, uses translation .po files

• translation strings for .po files can be extracted automatically from project source files

• plural forms are supported

• gettext function aliases are supported

• JavaScript string templates are supported

• locale data is extendable, for example by adding date formats, currencies, etc.

• locale data can be separated from the main bundle by using dynamic import

import { useLocales } from 'react-localized' // or from 'preact-localized'

export default () => {
  const { gettext } = useLocales()
  return (
    <>
      { gettext('Hello, World!') } // Привет, Мир!
    </>
  )
}

Live demo | Source

To generate .po files you can use the extractor CLI tool. Extractor searches your project source files for functions like gettext, ngettext, etc. Extractor also can update existing .po files without erasing existing translations in those files.

npm i react-localized-extractor

react-localized-extractor [options]

Options:
  --version      Show version number                                   [boolean]
  --help         Show help                                             [boolean]
  --locales, -l  List of desired locales (comma separated)   [string] [required]
  --source, -s   Source files pattern
                               [string] [default: "./src/**/*.@(js|ts|jsx|tsx)"]
  --output, -o   Output .po files directory      [string] [default: "./locales"]
  --alias, -a    Function alias                                         [string]
  --save-pot     Should create catalog .pot file in output directory
                                                      [boolean] [default: false]

react-localized-extractor -l ru

Use your favourite editor for .po files. I recommend you to use Poedit.

The loader transforms the contents of the .po files to JSON using gettext-parser. Therefore, if you are not using webpack, you can generate JSON files using this parser and import them into your project.

npm i react-localized-loader

module: {
  rules: [
    {
      test: /\.po$/,
      use: 'react-localized-loader'
    }
  ]
}

// for React
npm i react-localized 

// for Preact
npm i preact-localized

Use the createLocale function from the package. The first argument is for translation messages taken from .po file. The second argument is for extra data such as date formats, currencies, and so on.

Example of the file ru.js for russian locale

import { createLocale } from 'react-localized' // or from 'preact-localized'
import messages from 'messages/ru.po'

const extra = { ... }

export default createLocale(messages, extra)

import { LocalizedProvider } from 'react-localized' // or from 'preact-localized'

import fr from 'fr.js'
import de from 'de.js'

const ru = () => import('ru.js').then(data => data.default) // separated from the main bundle

const locales = { fr, de, ru }

export default () => (
  <LocalizedProvider 
    locales={locales} 
    selected="fr"
  >
    { ({ localeReady }) => (
      localeReady 
        ? 'render children' 
        : 'loading locale'
    ) }
  </LocalizedProvider>
)

import { useLocales } from 'react-localized' // or from 'preact-localized'

export default () => {
  const { gettext, ngettext, ...extra } = useLocales()
  return (
    <>
      { gettext('Hello, World!') } // Привет, Мир!
      { ngettext('apple', 'apples', 1) } // яблоко
      { ngettext('apple', 'apples', 2) } // яблока
      { ngettext('apple', 'apples', 5) } // яблок
    </>
  )
}

import { withLocales } from 'react-localized' // or from 'preact-localized'

class LocalizedComponent extends Component {
  render() {
    const { pgettext, formatDate, formats } = this.props // 'formatDate' and 'formats' are extra data passed to the 'createLocale'
    return (
      <>
        { pgettext('Context', 'Text with context') } // Текст с контекстом
        { formatDate(new Date(), formats.date) } // 1 января 2020
      </>
    )
  }
}

export default withLocales()(LocalizedComponent)

import { useLocales } from 'react-localized' // or from 'preact-localized'

export default () => {
  const { gettext, ngettext, pgettext, npgettext } = useLocales()
  const name = 'Anna'
  const i = 2
  return (
    <>
      { gettext`My name is ${name}` } // Мое имя Anna
      { ngettext`${i} apple``${i} apples`(i) } // 2 яблока
      { pgettext('Ctx')`My name is ${name}` }
      { npgettext('Ctx')`${i} apple``${i} apples`(i) }
    </>
  )
}

Use LocalizedProvider alias prop to define function aliases.

Example of alias for gettext only

<LocalizedProvider alias="__" />

Example of aliases for gettext and ngettext

<LocalizedProvider alias={{ gettext: '__', ngettext: '__n' }} />

Example of alias usage

import { useLocales } from 'react-localized' // or from 'preact-localized'

export default () => {
  const { __, __n } = useLocales()
  const name = 'Anna'
  return (
    <>
      { __('Hello, World!') }
      { __`My name is ${name}` }
      { __n`apple``apples`(5) }
    </>
  )
}

Also configure extractor.

Example of alias for gettext only

react-localized-extractor -l ru -a __

Example of aliases for gettext and ngettext

react-localized-extractor -l ru -a.gettext __ -a.ngettext __n

• locales - defined locales
• selected - selected locale (default en)
• alias - function aliases (string or object)
• children({ localeReady })

• locale
• gettext(text)
• ngettext(text, textPlural, n)
• pgettext(context, text)
• npgettext(context, text, textPlural, n)
• ...aliases - defined function aliases
• ...extra - extra data passed to the createLocale

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4