Recursos

Overview | Format.JS

Introduction

Tutorial - Internationalization of React apps - LinguiJS documentation

https://github.com/lukeed/rosetta

Apuntes

“Analicemos la forma simple”

// allLabels.json
{
	"es":{
		"buy": "Comprar",
		"accept": "Aceptar",
		...
	},
	"en-US":{
		"buy": "Buy",
		"accept": "Accept",
		...	
	},
	...
}

Para implementar esta solución mediante JavaScript se realizaría de la siguiente manera:

import allLabels from "locales/labels.json";

function getServerSideProps(){ ... }

function MyComponent ({locale}){
	const labels = allLabels[locale];
	return (
		<Button>{labels.comprar}</Button>
	)
}

Desventajas

  1. Entre más locales, más pesado el archivo. ¿Dividimos también por locales?
  2. Entre más labels, más pesado el archivo. ¿Divididimos por componentes?
  3. La responsabilidad está repetida en cada componente. ¿La extraemos?

Dividiendo por componentes

// locales/es/checkout.json
{
	"buy": "Comprar",
	"addToCart": "Agregar al carro",
	"contactUs": "¿Interesado/a?"
}

// locales/es/about.json
{
	"about": "Nosotros",
	"phone": "Teléfono",
	"contactUs": "Conócenos"
}

Desventajas

  1. Entre más locales, más pesado el archivo. ¿Dividimos también por locales?
  2. Entre más labels, más pesado el archivo. ¿Divididimos por componentes?
  3. La responsabilidad está repetida en cada componente. ¿La extraemos?

React

  1. React.Context: para abstraer lógica en un solo lugar y permitir su acceso a componentes que la necesiten sin prop drilling.
  2. React Hooks: para encapsular y reusar lógica.
import useTranslations from "useTranslations"

function getServerSideProps(){}

function MyComponent(){
	const labels = useTranslations()

	return (
		<Button>{labels("comprar")}</Button>
	)
}

function useTranslations(){
	const ctx = useContext(LocaleContext);
	const locale = ctx.getCurrentLocale();
	const labels = ctx.labels.get(locale);
	return labels;
}

Librerías populares