# gt-react: General Translation React SDK: Cadenas compartidas
URL: https://generaltranslation.com/es/docs/react/guides/shared-strings.mdx
---
title: Cadenas compartidas
description: Cómo internacionalizar cadenas usadas en múltiples componentes y archivos
---

{/* GENERADO AUTOMÁTICAMENTE: No editar directamente. Edita la plantilla en content/docs-templates/ en su lugar. */}

Las cadenas compartidas son valores de texto utilizados en varios lugares de tu aplicación, como etiquetas de navegación, mensajes de formularios o datos de configuración. En lugar de duplicar la lógica de traducción en todas partes, usa [`msg`](/docs/react/api/strings/msg) para marcar cadenas para traducción y [`useMessages`](/docs/react/api/strings/use-messages) para decodificarlas.


## El problema del contenido compartido

Considera esta configuración de navegación utilizada en toda tu aplicación:

```tsx
// navData.ts
export const navData = [
  {
    label: 'Inicio',
    description: 'Página de inicio',
    href: '/'
  },
  {
    label: 'Acerca de', 
    description: 'Información de la empresa',
    href: '/about'
  }
];
```

Para internacionalizar esto, normalmente deberías:

1. Convertirlo en una función que reciba una función de traducción
2. Actualizar cada uso para llamar a la función con `t`
3. Gestionar la complejidad en todo tu código

Esto añade sobrecarga de mantenimiento y hace que tu código sea más difícil de leer. La función [`msg`](/docs/react/api/strings/msg) soluciona esto al permitirte marcar cadenas para traducción in situ y luego decodificarlas cuando sea necesario.


## Inicio rápido

Usa [`msg`](/docs/react/api/strings/msg) para marcar cadenas y [`useMessages`](/docs/react/api/strings/use-messages) para decodificarlas:

```tsx
// navData.ts - Mark strings for translation
import { msg } from 'gt-react';

export const navData = [
  {
    label: msg('Home'),
    description: msg('The home page'), 
    href: '/'
  },
  {
    label: msg('About'),
    description: msg('Información sobre la empresa'),
    href: '/about'
  }
];
```

```tsx
// Uso del componente: decodificar cadenas marcadas
import { useMessages } from 'gt-react';
import { navData } from './navData';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navData.map((item) => (
        <a key={item.href} href={item.href} title={m(item.description)}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}
```


## Cómo funcionan las cadenas compartidas

El sistema de cadenas compartidas funciona en dos fases:

1. **Fase de marcado**: [`msg`](/docs/react/api/strings/msg) codifica las cadenas con metadatos de traducción
2. **Fase de decodificación**: [`useMessages`](/docs/react/api/strings/use-messages) decodifica y traduce las cadenas

```tsx
// msg() codifica la cadena con metadatos
const encoded = msg('Hello, world!');
console.log(encoded); // "Hello, world!:eyIkX2hhc2giOiJkMjA3MDliZGExNjNlZmM2In0="

// useMessages() decodifica y traduce
const m = useMessages();
const translated = m(encoded); // "Hello, world!" en el idioma del usuario
```

<Callout type="warn">
  Las cadenas codificadas de [`msg`](/docs/react/api/strings/msg) no pueden usarse directamente; deben decodificarse con [`useMessages`](/docs/react/api/strings/use-messages).
</Callout>


## Componentes

Usa el hook [`useMessages`](/docs/react/api/strings/use-messages):

```tsx
import { useMessages } from 'gt-react';

const encodedString = msg('¡Hola, mundo!');

function MyComponent() {
  const m = useMessages();
  return <div>{m(encodedString)}</div>;
}
```


## Obtener cadenas originales con decodeMsg

A veces necesitas acceder a la cadena original sin traducir, por ejemplo, para el registro, la depuración o las comparaciones. Usa [`decodeMsg`](/docs/react/api/strings/msg#decodemsg) para extraer el texto original:

```tsx
import { decodeMsg } from 'gt-react';

const encoded = msg('Hello, world!');
const original = decodeMsg(encoded); // "Hello, world!" (original)
const translated = m(encoded); // "Hello, world!" (en el idioma del usuario)

// Useful for logging or debugging
console.log('Original string:', decodeMsg(encoded));
console.log('Translated string:', m(encoded));
```


### Casos de uso de decodeMsg

* **Desarrollo y depuración**: Registrar las cadenas originales para diagnosticar problemas
* **Manejo de contenido de respaldo predeterminado**: Usar el texto original cuando fallen las traducciones
* **Comparación de cadenas**: Comparar con valores originales conocidos
* **Analíticas**: Rastrear el uso de las cadenas originales

```tsx
// Example: Fallback handling
function getDisplayText(encodedStr) {
  const m = useMessages();
  try {
    return m(encodedStr);
  } catch (error) {
    console.warn('Error de traducción; se usará el texto original:', decodeMsg(encodedStr));
    return decodeMsg(encodedStr);
  }
}
```


## Uso de variables

Para cadenas con contenido dinámico, utiliza marcadores de posición y pasa variables:

```tsx
// Mark string with variables
const items = 100;
export const pricing = [
  {
    name: 'Basic',
    price: 100,
    description: msg('El plan Básico incluye {items} elementos', { items })
  }
];
```

```tsx
// Usar en un componente
function PricingCard() {
  const m = useMessages();
  
  return (
    <div>
      <h3>{pricing[0].name}</h3>
      <p>{m(pricing[0].description)}</p>
    </div>
  );
}
```


### ICU message format

Para formatos avanzados, usa la sintaxis de ICU:

```tsx
const count = 10;
const message = msg('Hay {count, plural, =0 {ningún artículo} =1 {un artículo} other {{count} artículos}} en el carrito', { count });
```

<Callout>
  Obtén más información sobre ICU message format en la [documentación de Unicode](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


## Ejemplos

### Configuración de la navegación

```tsx
// config/navigation.ts
import { msg } from 'gt-react';

export const mainNav = [
  {
    label: msg('Home'),
    href: '/',
    icon: 'home'
  },
  {
    label: msg('Products'),
    href: '/products', 
    icon: 'package'
  },
  {
    label: msg('About Us'),
    href: '/about',
    icon: 'info'
  }
];

export const footerLinks = [
  {
    title: msg('Company'),
    links: [
      { label: msg('About'), href: '/about' },
      { label: msg('Careers'), href: '/careers' },
      { label: msg('Contact'), href: '/contact' }
    ]
  },
  {
    title: msg('Support'), 
    links: [
      { label: msg('Help Center'), href: '/help' },
      { label: msg('Documentation'), href: '/docs' },
      { label: msg('Referencia de API'), href: '/api' }
    ]
  }
];
```

```tsx
// components/Navigation.tsx
import { useMessages } from 'gt-react';
import { mainNav } from '../config/navigation';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {mainNav.map((item) => (
        <a key={item.href} href={item.href}>
          <Icon name={item.icon} />
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}
```


### Configuración del formulario

```tsx
// config/forms.ts
import { msg } from 'gt-react';

export const formMessages = {
  placeholders: {
    email: msg('Enter your email address'),
    password: msg('Enter your password'),
    message: msg('Type your message here...')
  },
  actions: {
    send: msg('Send Message'),
    save: msg('Save Changes'),
    cancel: msg('Cancel')
  },
  validation: {
    required: msg('This field is required'),
    email: msg('Please enter a valid email address'),
    minLength: msg('Must be at least {min} characters', { min: 8 }),
    maxLength: msg('No puede exceder los {max} caracteres', { max: 100 })
  },
  success: {
    saved: msg('Changes saved successfully'),
    sent: msg('Message sent successfully'),
    updated: msg('Profile updated')
  },
  errors: {
    network: msg('Network error - please try again'),
    server: msg('Server error - please contact support'),
    timeout: msg('Request timed out - please try again')
  }
};
```

```tsx
// components/ContactForm.tsx
import { useMessages } from 'gt-react';
import { formMessages } from '../config/forms';

function ContactForm() {
  const m = useMessages();
  const [errors, setErrors] = useState({});
  
  return (
    <form>
      <input 
        type="email"
        placeholder={m(formMessages.placeholders.email)}
        required
      />
      {errors.email && <span>{m(formMessages.validation.email)}</span>}
      
      <button type="submit">
        {m(formMessages.actions.send)}
      </button>
    </form>
  );
}
```


### Generación dinámica de contenido

```tsx
// utils/productData.ts
import { msg } from 'gt-react';

function mockProducts() {
  return [
    { name: 'iPhone 15', company: 'Apple', category: 'Electrónica' },
    { name: 'Galaxy S24', company: 'Samsung', category: 'Electrónica' }
  ];
}

export function getProductData() {
  const products = mockProducts();
  
  return products.map(product => ({
    ...product,
    description: msg('{name} es un producto de {category} de {company}', {
      name: product.name,
      category: product.category,
      company: product.company
    })
  }));
}
```

```tsx
// components/ProductList.tsx
import { useMessages } from 'gt-react';
import { getProductData } from '../utils/productData';

function ProductList() {
  const m = useMessages();
  const products = getProductData();
  
  return (
    <div>
      {products.map(product => (
        <div key={product.name}>
          <h3>{product.name}</h3>
          <p>{m(product.description)}</p>
        </div>
      ))}
    </div>
  );
}
```


## Problemas frecuentes

### Uso directo de cadenas codificadas

Nunca uses directamente la salida de [`msg`](/docs/react/api/strings/msg):

```tsx
// ❌ Wrong - encoded string used directly
const encoded = msg('Hello, world!');
return <div>{encoded}</div>; // Shows encoded string, not translation

// ✅ Correcto: decodifica la cadena primero  
const encoded = msg('Hello, world!');
const m = useMessages();
return <div>{m(encoded)}</div>; // Muestra la traducción adecuada
```


### Contenido dinámico en msg()

Las cadenas deben conocerse en tiempo de compilación:

```tsx
// ❌ Incorrecto: template literal dinámico
const name = 'John';
const message = msg(`Hello, ${name}`); // Error en tiempo de compilación

// ✅ Correct - use variables  
const name = 'John';
const message = msg('Hello, {name}', { name });
```


### Olvidar decodificar

Cada cadena de [`msg`](/docs/react/api/strings/msg) debe decodificarse:

```tsx
// ❌ Missing decoding
const config = {
  title: msg('Dashboard'),
  subtitle: msg('Welcome back')
};

// Later in component - forgot to decode
return <h1>{config.title}</h1>; // Shows encoded string

// ✅ Correct - decode when using
const m = useMessages();
return <h1>{m(config.title)}</h1>; // Muestra el título traducido
```


## Próximos pasos

- [Guía de dictionaries](/docs/react/guides/dictionaries) - Organiza las traducciones con datos estructurados
- [Guía de idiomas](/docs/react/guides/languages) - Configura los idiomas compatibles
- Referencia de API:
  - [Función `msg`](/docs/react/api/strings/msg)