Traducción
Definición de Traducciones
La función t en intlayer permite declarar contenido en múltiples idiomas. Esta función garantiza la seguridad de tipos, generando un error si faltan traducciones, lo cual es particularmente útil en entornos TypeScript.
Usando TypeScript
Aquí hay un ejemplo de cómo declarar contenido con traducciones en un archivo TypeScript:
1import { t, type DeclarationContent } from "intlayer";
2
3interface Content {
4 welcomeMessage: string;
5}
6
7export default {
8 key: "multi_lang",
9 content: {
10 welcomeMessage: t({
11 en: "Welcome to our application",
12 fr: "Bienvenue dans notre application",
13 es: "Bienvenido a nuestra aplicación",
14 }),
15 },
16} satisfies DeclarationContent<Content>;Usando Módulos ECMAScript
Si estás utilizando módulos ECMAScript, la declaración se ve así:
1import { t } from "intlayer";
2
3export default {
4 key: "multi_lang",
5 content: {
6 welcomeMessage: t({
7 en: "Welcome to our application",
8 fr: "Bienvenue dans notre application",
9 es: "Bienvenido a nuestra aplicación",
10 }),
11 },
12};Usando Módulos CommonJS
En una configuración CommonJS, puedes declarar traducciones así:
1const { t } = require("intlayer");
2
3module.exports = {
4 key: "multi_lang",
5 content: {
6 welcomeMessage: t({
7 en: "Welcome to our application",
8 fr: "Bienvenue dans notre application",
9 es: "Bienvenido a nuestra aplicación",
10 }),
11 },
12};Usando JSON
Para declaraciones basadas en JSON, puedes definir traducciones de la siguiente manera:
1{
2 "key": "multi_lang",
3 "content": {
4 "welcomeMessage": {
5 "nodeType": "translation",
6 "translation": {
7 "en": "Welcome to our application",
8 "fr": "Bienvenue dans notre application",
9 "es": "Bienvenido a nuestra aplicación"
10 }
11 }
12 }
13}Configuración para Locales
Para asegurar un manejo adecuado de las traducciones, puedes configurar los locales aceptados en intlayer.config.ts. Esta configuración te permite definir los idiomas que tu aplicación soporta:
1import { Locales, type IntlayerConfig } from "intlayer";
2
3const config: IntlayerConfig = {
4 internationalization: {
5 locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
6 },
7};
8
9export default config;Usando Traducciones en Componentes de React
Con react-intlayer, puedes usar traducciones en componentes de React. Aquí hay un ejemplo:
1import { useIntlayer } from "react-intlayer";
2
3const MyComponent = () => {
4 const content = useIntlayer("multi_lang");
5
6 return (
7 <div>
8 <p>{content.welcomeMessage}</p>
9 </div>
10 );
11};
12
13export default MyComponent;Este componente obtiene la traducción correspondiente basada en el locale actual establecido en tu aplicación.
Objetos de Contenido Personalizados
intlayer soporta objetos de contenido personalizados para traducción, permitiéndote definir estructuras más complejas mientras aseguras la seguridad de tipos. Aquí hay un ejemplo con un objeto personalizado:
1import { t, type DeclarationContent } from "intlayer";
2
3interface ICustomContent {
4 title: string;
5 content: string;
6}
7
8const customContent = {
9 key: "custom_content",
10 content: {
11 profileText: t<ICustomContent>({
12 en: {
13 title: "Page Title",
14 content: "Page Content",
15 },
16 fr: {
17 title: "Titre de la Page",
18 content: "Contenu de la Page",
19 },
20 es: {
21 title: "Título de la Página",
22 content: "Contenido de la Página",
23 },
24 }),
25 },
26} satisfies DeclarationContent;
27
28export default customContent;Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.
Enlace de GitHub a la documentación