Using translations with IO's Render Framework

[matheusps]

In the Design System, some components have default translations. To switch locales you can use the I18nProvider component, exported by our package. To get the locale from the Render framework, you can use useRuntime like this:

import { useRuntime } from 'vtex.render-runtime'
import { I18nProvider } from '@vtex/admin-ui'

export function Example() {
  const { culture: { locale } } = useRuntime()
  
  return (
    <I18nProvider locale={locale}>
      {/** your app goes here */}
    </I18nProvider>
  )
}

If you often use the locale, you have the option of abstracting the behavior on a custom hook:

import { useRuntime } from 'vtex.render-runtime'

export function useLocale(): string {
  const { culture: { locale } } = useRuntime()

  return locale
}

[davicostalf]

@matheusps Can this discussion be merged in #579?

[matheusps]

This is outaded