Internationalization (i18n)

The components use the user browser language to determine the locale.

You can customize the strings used by the components using the LocaleContext.Provider component and access them using the useLocale hook.

The useLocale hook returns a map of strings used internally by some Lemonade components, like Calendar, Paginator etc.

import { LocaleContext, Paginator } from '@lemonade/ui'
import ptBr from '@lemonade/ui/i18n/locales/pt-BR'
import React from 'react'

function LocaleProviderDemo() {
  // Using Paginator as example since it uses strings from locale context internally
  return (
    <LocaleContext.Provider value={ptBr}>
      <Paginator page={5} total={10} />
    </LocaleContext.Provider>
  )
}

export default LocaleProviderDemo

Available locales

The locale strings are exported from @lemonade/ui/i18n/locales, one module per locale:

import enUS from '@lemonade/ui/i18n/locales/en-US'
import ptBR from '@lemonade/ui/i18n/locales/pt-BR'

Feel free to open a pull request if your locale is not there yet.