Autor:
    Creación:2026-07-30Última actualización:2026-07-30

    Contenido Basado en Selección / Select en Intlayer

    Cómo funciona Select

    En Intlayer, el contenido basado en selección se logra mediante la función select, que asigna valores de cadena arbitrarios a su contenido correspondiente. Es el equivalente a un mensaje {value, select, …} de ICU, o a una declaración switch en el código de tu aplicación.

    Usa select cuando el discriminante es una cadena de formato libre: un estado, un plan, una plataforma, un rol. Para los demás discriminantes, Intlayer proporciona nodos dedicados:

    Discriminante Nodo
    Una cantidad enu()
    Un booleano cond()
    Un género gender()
    Cualquier otra cadena select()

    Configurando el Contenido Basado en Selección

    Para configurar el contenido basado en selección en tu proyecto de Intlayer, crea un módulo de contenido que incluya tus definiciones de selección. A continuación se muestran ejemplos en varios formatos.

    **/*.content.ts
    import { select, type Dictionary } from "intlayer";

const myPostContent = {
  key: "my_key",
  content: {
    publishStatus: select({
      draft: "This post is a draft",
      published: "This post is live",
      scheduled: "This post is scheduled",
      fallback: "Unknown status", // Opcional
    }),
  },
} satisfies Dictionary;

export default myPostContent;
    Si no se declara un fallback, la última clave declarada se tomará como valor predeterminado cuando el valor proporcionado no coincida con ningún caso declarado; el mismo contrato que cond() y gender().

    Seguridad de tipos

    El argumento aceptado se infiere de los casos declarados:

    • Sin un fallback, solo se aceptan los casos declarados: un error tipográfico es un error de tipo.
    • Con un fallback, se acepta cualquier cadena (el fallback cubre los valores no coincidentes) mientras los casos declarados siguen autocompletándose.

    ¿Por qué no un objeto simple?

    Es tentador declarar un objeto simple e indexarlo con el valor de tiempo de ejecución:

    tsx
    // ❌ No hagas estoconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus[publishType]}</p>;

    El compilador de Intlayer analiza tu fuente para eliminar el contenido no utilizado y minificar las claves restantes. Un acceso computado dinámico (obj[expr]) no se puede resolver estáticamente, por lo que toda la rama se marca como opaca: se mantiene en el paquete y sus claves permanecen sin minificar.

    Con select(), la resolución del caso ocurre dentro de una llamada de función en lugar de como un acceso a una propiedad. El compilador ve un solo acceso de campo estático y optimiza el nodo exactamente como enu(), cond() o gender():

    tsx
    // ✅ Haz estoconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus(publishType)}</p>;

    Usando Contenido Basado en Selección

    Para utilizar contenido basado en selección dentro de un componente de React, importa y usa el hook useIntlayer del paquete react-intlayer. Este hook recupera el contenido para la clave especificada y te permite pasar un valor para seleccionar la salida adecuada.

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const PostStatus: FC = () => {
const { publishStatus } = useIntlayer("my_key");

return (
  <div>
    <p>
      {
        /* Salida: This post is a draft */
        publishStatus("draft")
      }
    </p>
    <p>
      {
        /* Salida: This post is live */
        publishStatus("published")
      }
    </p>
    <p>
      {
        /* Salida: Unknown status */
        publishStatus("Archived")
      }
    </p>
  </div>
);
};

export default PostStatus;

    Combinando Select con Otros Nodos

    Cada caso contiene un nodo de contenido completo, por lo que select se compone con t(), insert(), md() y los demás:

    **/*.content.ts
    import { insert, select, t, type Dictionary } from "intlayer";const myPostContent = {  key: "my_key",  content: {    publishStatus: select({      draft: insert(        t({          en: "{{name}} saved a draft",          fr: "{{name}} a enregistré un brouillon",          es: "{{name}} guardó un borrador",        })      ),      published: insert(        t({          en: "{{name}} published the post",          fr: "{{name}} a publié l’article",          es: "{{name}} publicó el artículo",        })      ),      fallback: insert(        t({          en: "{{name}} updated the post",          fr: "{{name}} a mis à jour l’article",          es: "{{name}} actualizó el artículo",        })      ),    }),  },} satisfies Dictionary;export default myPostContent;
    tsx
    publishStatus("draft")({ name: "Alice" }); // Salida: Alice guardó un borrador

    Migrando desde ICU select

    Los mensajes que usan el argumento ICU select se importan como nodos select:

    text
    {publishType, select, draft {draft} published {published} other {Unknown}}

    se convierte en

    typescript
    select(  {    draft: "draft",    published: "published",    fallback: "Unknown",  },  "publishType");

    El caso ICU other pasa a llamarse fallback, que es el nombre canónico de Intlayer para el caso general. El segundo argumento registra el nombre de la variable ICU para que el mensaje regrese exactamente a la misma cadena ICU cuando se exporte.

    Un ICU select cuyos casos son valores de género (male / female / other) se importa en su lugar como un nodo gender.

    Recursos Adicionales

    Para obtener información más detallada sobre configuración y uso, consulta los siguientes recursos:

    Estos recursos ofrecen más información sobre la configuración y el uso de Intlayer en varios entornos y frameworks.

    Plural
    Enumeración